Description

While interacting with multi-value props in the UI (specifically when adding or removing items), the interface briefly flickers before stabilizing. During this flicker, the row weight indicator also momentarily flickers, which creates a distracting visual effect.

Although the functionality works correctly, the repeated flickering negatively impacts the overall user experience and makes the interaction feel unstable.

This behavior is especially noticeable when rapidly adding or removing items. Ideally, the UI should update smoothly without noticeable flickering to provide a more seamless and polished interaction.

Steps to Reproduce

A video demonstrating the issue is attached for reference.
ux

Actual Result

  • The UI flickers briefly when items are added or removed.
  • The row weight values also momentarily flicker during the update.

Expected Result

  • Items should be added or removed without visible flickering.
  • Row weights should update smoothly without visual instability.

Acceptance Criteria

  • Adding an item does not cause UI flickering.
  • Removing an item does not cause UI flickering.
  • Row weight indicators should not flash.
  • UI updates feel seamless and stable during interactions with multi-value props.
CommentFileSizeAuthor
#10 Flashing popver.mov4.04 MButkarsh_33
#7 Hidden element flashing.mov1.44 MButkarsh_33
#7 Extra time on Adding new component.mov2.01 MButkarsh_33
#4 Screen Recording 2026-03-25 at 3.05.21 PM.mov2.6 MBnarendrar
flicker.gif208.46 KBvipin.mittal18

Issue fork canvas-3579026

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

vipin.mittal18 created an issue. See original summary.

narendrar made their first commit to this issue’s fork.

narendrar opened merge request !794

narendrar’s picture

narendrar
He/Him
Primary language English
Location Jaipur, India
commented
Status: Active » Needs review
StatusFileSize
new Screen Recording 2026-03-25 at 3.05.21 PM.mov2.6 MB

Attached a video of the current functionality.

chandu7929’s picture

chandu7929 commented

Overall, the changes look good, but I still see flickering when adding or removing elements.

There is room for improvement by reducing the AJAX call time and using UI effects like fadeIn or similar when replacing the DOM with the AJAX response to help reduce flickering.

bnjmnm made their first commit to this issue’s fork.

utkarsh_33’s picture

utkarsh_33 commented
StatusFileSize
new Extra time on Adding new component.mov2.01 MB
new Hidden element flashing.mov1.44 MB

While testing this i found 2 issue.

  • Issue no 1 is that when i click remove button then i can see a momentary flashing of the popover on the top-left side of the screen.Attaching the video for the same.
  • Issue no 2 is that when i click Add button then i have to wait for a long time to get the rows added, or sometimes the row even does not get added. I need to refresh the page. I am attaching the video for this as well. I recommend deleting more that 2-3 rows to see this more accurately.

The videos have descriptive names which makes it easier for mapping the errors.

utkarsh_33’s picture

utkarsh_33 commented
Status: Needs review » Needs work
bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Needs work » Needs review

Issue no 1 is that when i click remove button then i can see a momentary flashing of the popover on the top-left side of the screen.Attaching the video for the same.

Looks like this was due to the immediate hiding of the row to be removed, which means the popover no longer has a positioning anchor. I solved this by instead changing the height to 1px so it's effectively invisible, but still occupies the space needed to position the popover.

Issue no 2 is that when i click Add button then i have to wait for a long time to get the rows added, or sometimes the row even does not get added. I need to refresh the page. I am attaching the video for this as well. I recommend deleting more that 2-3 rows to see this more accurately.

This looks like something that will be even more comprehensively addressed in #3562896: Manage props/page data forms with react-hook-form, and has more to do with multivalue in general. I brought in parts of the solution from that issue, which prevents add / remove while other AJAX operations or preview updates are taking place. Without these safeguards, it's possible to run into things like entity lock problems. I tried to add an e2e test with 10 adds and removes, but admittedly it was a bit fragile. There are updates to our preview mechanism in #3562896 that will likely fix that, but for now this probably should be tested manually only. This worked well in my manual testing, but if a reviewer experiences differently, please share the response of the AJAX request that doesn't seem to follow through and that'll help me refine this solution.

utkarsh_33’s picture

utkarsh_33 commented
StatusFileSize
new Flashing popver.mov4.04 MB

I tested this and i can still see the flashing popover element, but this time at a new location. Attaching the vide for reference. Just look at the exact location where the popover actually opens. You can se how it flash for a moment.

Also as per #9 we can fix the other issue more comprehensively in #3562896: Manage props/page data forms with react-hook-form.

utkarsh_33’s picture

utkarsh_33 commented
Status: Needs review » Needs work
utkarsh_33’s picture

utkarsh_33 commented

Just a minor UI feedback, no code objections. Code looks good to me. Once the flashing issue is resolved, happy to RTBC.