Skip to content

Fix: update adaptive card in a single mutation to avoid layout shifts#5494

Merged
OEvgeny merged 4 commits into
mainfrom
fix/adaptive-card-flash
Jun 3, 2025
Merged

Fix: update adaptive card in a single mutation to avoid layout shifts#5494
OEvgeny merged 4 commits into
mainfrom
fix/adaptive-card-flash

Conversation

@OEvgeny
Copy link
Copy Markdown
Collaborator

@OEvgeny OEvgeny commented Jun 3, 2025

Fixes #

Changelog Entry

  • Fixed re-rendering Adaptive Card should not cause momentarily layout shift, by @OEvgeny, in PR #5494
    This fixes the layout shift when we replace the adaptive card rendered.

Design

Instead of doing removeChild then addChild, call replaceChildren and leave cleanup to a dedicated useEffect.

Specific Changes

  • Fixed the update adaptive card rendering logic
  • Added a test verifying there is a single mutation in the DOM happens

-

  • I have added tests and executed them locally
  • I have updated CHANGELOG.md
  • I have updated documentation

Review Checklist

This section is for contributors to review your work.

  • Accessibility reviewed (tab order, content readability, alt text, color contrast)
  • Browser and platform compatibilities reviewed
  • CSS styles reviewed (minimal rules, no z-index)
  • Documents reviewed (docs, samples, live demo)
  • Internationalization reviewed (strings, unit formatting)
  • package.json and package-lock.json reviewed
  • Security reviewed (no data URIs, check for nonce leak)
  • Tests reviewed (coverage, legitimacy)

@OEvgeny OEvgeny marked this pull request as ready for review June 3, 2025 20:43
@OEvgeny OEvgeny changed the title Fix/adaptive card flash Fix: adaptive card flash Jun 3, 2025
@OEvgeny OEvgeny changed the title Fix: adaptive card flash Fix: update adaptive card in a single mutation to avoid layout shifts Jun 3, 2025
Comment thread CHANGELOG.md Outdated
Comment thread __tests__/html2/adaptiveCard/rerender.html Outdated
compulim
compulim previously approved these changes Jun 3, 2025
Copy link
Copy Markdown
Contributor

@compulim compulim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nitpicking.

Co-authored-by: William Wong <compulim@users.noreply.github.com>
@OEvgeny OEvgeny merged commit ee2c5f2 into main Jun 3, 2025
51 of 52 checks passed
@OEvgeny OEvgeny deleted the fix/adaptive-card-flash branch June 3, 2025 23:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants