Fix: modal rendering when opened

[OEvgeny]

Fixes #

Changelog Entry

Fixed

• Fixed modal dialog rendering to prevent visual flicker and improve UX when opening code views, in PR #5374, by @OEvgeny

Description

This PR addresses visual inconsistencies that occur when opening modal dialogs in Web Chat, particularly in code view scenarios. The changes ensure smoother transitions and prevent unwanted visual artifacts during modal rendering.

Design

The solution implements several key improvements:

1. Uses useLayoutEffect instead of useEffect for modal operations to ensure synchronous DOM updates
2. Adds conditional rendering for code content to prevent flash of empty modal
3. Implements CSS visibility handling that allows content components to return nothing without triggering modal display
4. Fixes edge cases with empty text in code blocks: we now don't display the button

Specific Changes

• Changed modal dialog initialization from useEffect to useLayoutEffect to prevent layout shifts
• Added null check for highlightedCode in CodeContent component
• Added handling for empty text in code blocks in MarkdownTextContent
• Added CSS rule to hide modal dialog when body is empty, allowing content to resolve without displaying empty state
• Updated modal dialog styles to handle quick state transitions without showing intermediate state

-

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

Review Checklist

• 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)