>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3462360. --> Reported by: [lauriii](https://www.drupal.org/user/1078742) >>> <h3 id="overview">Overview</h3> <p>When changes are being made to component properties on the right sidebar form, those changes should be reflected in the preview in real time. <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3462441" title="Status: Closed (fixed)">#3462441: Contextual form values need to be integrated with Redux: start with single-property field types</a></span> implemented that.</p> <p>The updates to the preview should be as seamless as possible, meaning that we should avoid any loading animations that block users from interacting with the page, as well as flickering.</p> <h3 id="proposed-resolution">Proposed resolution</h3> <p>To minimize flickering and minimize latency, do not re-render the <em>entire</em> preview, but only the affected component.</p> <p>IOW, the UI must:</p> <ol> <li>extract the subtree of <code>layout</code> + <code>model</code> that represents only the component the Content Creator just modified</li> <li>send <em>that</em> to <code>/api/preview</code> aka <code>\Drupal\experience_builder\Controller\SdcController::preview()</code> (which is agnostic to this &mdash; no code changes needed on the server side &#128077;)</li> <li>apply the response to the current preview: update the relevant DOM subtrees in all preview <code>&lt;iframe&gt;</code>s</li> </ol> <h3 id="ui-changes">User interface changes</h3> > Related issue: [Issue #3453690](https://www.drupal.org/node/3453690) > Related issue: [Issue #3462441](https://www.drupal.org/node/3462441) > Related issue: [Issue #3475672](https://www.drupal.org/node/3475672)