Problem

When having a complete page of components, like the demo-content of lupus_decoupled_starter, component updates cause content to jump around during re-load. This results into a bad editing experience.

This used to work nicely in the past, e.g. with the Drupalcon demo.

Issue fork canvas_extjs-3584384

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

fago created an issue. See original summary.

fago opened merge request !30

fago’s picture

fago
Primary language German
Location Vienna
commented
Status: Active » Needs review

canvas actually checks for data-astro-template before swapping iframe. So it does not find our JS-elements out of the box.

This MR impleements the change in canvas_extjs, but we need to adjust the custom_elements nuxt preview-provider to delete the markers upon hydration finish also. Given that things work for me.

Later on, we should add a test, e.g.

Test: Canvas preview iframe swaps without hydration timeout

1. Log in as admin
2. Navigate to a canvas page editor with ExtJS components
3. Wait for the preview iframe to load
4. Collect console messages from the preview iframe
5. Assert "Astro hydration in iFrame did not complete within 1 second" is NOT in the console output
6. Assert the preview content is visible (components rendered)

  • fago committed 0a04dae2 on 1.x 
    fix: #3584384 Canvas page re-rendering causes CLS issues

By: fago
fago’s picture

fago
Primary language German
Location Vienna
commented
Status: Needs review » Fixed

Merged!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.