Fix: modal rendering when opened (#5374)

* fix: modal rendering when opened * Changelog * Fix tests * Fix snapshot
microsoft · Nov 8, 2024 · a2105fd · a2105fd
1 parent 2fc4f5c
commit a2105fd
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -105,6 +105,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Fixes [#5323](https://github.com/microsoft/BotFramework-WebChat/issues/5323). Removed unused CSS class from carousel component, eliminating unintended styling, in PR [#5325](https://github.com/microsoft/BotFramework-WebChat/pull/5325), by [@OEvgeny](https://github.com/OEvgeny)
 -  Resolved CSS class name conflicts between component and fluent packages to prevent styling issues, in PR [#5326](https://github.com/microsoft/BotFramework-WebChat/pull/5326), in PR [#5327](https://github.com/microsoft/BotFramework-WebChat/pull/5327), by [@OEvgeny](https://github.com/OEvgeny)
 -  Fixed [#5350](https://github.com/microsoft/BotFramework-WebChat/issues/pull/5350). Bundled `shiki` in component package, in PR [#5349](https://github.com/microsoft/BotFramework-WebChat/pull5349), by [@compulim](https://github.com/compulim)
+-  Fixed modal dialog rendering to prevent visual flicker and improve UX when opening code views, in PR [#5374](https://github.com/microsoft/BotFramework-WebChat/pull/5374), by [@OEvgeny](https://github.com/OEvgeny)
 
 # Removed
 

diff --git a/...ender-html-when-unset-should-render-sanitized-html-in-citation-modal-1-snap.png b/...ender-html-when-unset-should-render-sanitized-html-in-citation-modal-1-snap.png
diff --git a/packages/component/src/Attachment/Text/private/CodeContent.tsx b/packages/component/src/Attachment/Text/private/CodeContent.tsx
@@ -55,6 +55,10 @@ const CodeContent = memo(({ children, className, code, language, title }: Props)
     };
   }, [code, codeBlockTheme, language]);
 
+  if (!highlightedCode) {
+    return null;
+  }
+
   return (
     <Fragment>
       <div className={'webchat__view-code-dialog__header'}>

diff --git a/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx b/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx
@@ -236,7 +236,7 @@ const MarkdownTextContent = memo(({ activity, children, markdown }: Props) => {
         </LinkDefinitions>
       )}
       <div className="webchat__text-content__activity-actions">
-        {activity.type === 'message' && isBasedOnSoftwareSourceCode(messageThing) ? (
+        {activity.type === 'message' && isBasedOnSoftwareSourceCode(messageThing) && messageThing.isBasedOn.text ? (
           <ActivityViewCodeButton
             className="webchat__text-content__activity-view-code-button"
             code={messageThing.isBasedOn.text}

diff --git a/packages/component/src/Styles/StyleSet/ModalDialog.ts b/packages/component/src/Styles/StyleSet/ModalDialog.ts
@@ -19,6 +19,12 @@ export default function createModalDialogStyleSet() {
         border: 0
       },
 
+      // Assume the content is being prepared, so we hide the whole dialog until content appears in the DOM.
+      // Use opacity to still be able to set focus on the first available control (close button).
+      '&:has(.webchat__modal-dialog__body:empty)': {
+        opacity: 0
+      },
+
       '& .webchat__modal-dialog__box': {
         borderRadius: 2,
         overflow: 'hidden',

diff --git a/packages/component/src/providers/ModalDialog/private/Popover.tsx b/packages/component/src/providers/ModalDialog/private/Popover.tsx
@@ -1,6 +1,6 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
-import React, { memo, type PropsWithChildren, useCallback, useEffect, useRef } from 'react';
+import React, { memo, type PropsWithChildren, useCallback, useLayoutEffect, useRef } from 'react';
 
 import useStyleSet from '../../../hooks/useStyleSet';
 
@@ -25,7 +25,7 @@ const ModalDialog = memo(
 
     const handleCloseButtonClick = useCallback(() => dialogRef.current?.close(), [dialogRef]);
 
-    useEffect(() => dialogRef.current?.showModal(), [dialogRef]);
+    useLayoutEffect(() => dialogRef.current?.showModal(), [dialogRef]);
 
     return (
       <dialog