feat(renderer-iframe): add prop to show a wait spinner on page load

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/src/components/common/motd-modal/__snapshots__/motd-modal.spec.tsx.snap

@@ -20,7 +20,7 @@ exports[`motd modal renders a modal if a motd was fetched and can dismiss it 1`]
           data-testid="motd-renderer"
         >
           This is a mock implementation of a iframe renderer. Props: 
-          {"frameClasses":"w-100","rendererType":"simple","markdownContentLines":["very important mock text!"],"adaptFrameHeightToContent":true}
+          {"frameClasses":"w-100","rendererType":"simple","markdownContentLines":["very important mock text!"],"adaptFrameHeightToContent":true,"showWaitSpinner":true}
         </span>
       </div>
       <div

frontend/src/components/common/motd-modal/motd-modal.tsx

@@ -60,6 +60,7 @@ export const MotdModal: React.FC = () => {
             rendererType={RendererType.SIMPLE}
             markdownContentLines={lines as string[]}
             adaptFrameHeightToContent={true}
+            showWaitSpinner={true}
           />
         </EditorToRendererCommunicatorContextProvider>
       </Modal.Body>

frontend/src/components/common/renderer-iframe/renderer-iframe.tsx

@@ -34,6 +34,7 @@ export interface RendererIframeProps extends Omit<CommonMarkdownRendererProps &
   frameClasses?: string
   onRendererStatusChange?: undefined | ((rendererReady: boolean) => void)
   adaptFrameHeightToContent?: boolean
+  showWaitSpinner?: boolean
 }
 
 const log = new Logger('RendererIframe')
@@ -52,6 +53,7 @@ const log = new Logger('RendererIframe')
  * @param rendererType The {@link RendererType type} of the renderer to use.
  * @param adaptFrameHeightToContent If set, the iframe height will be adjusted to the content height
  * @param onRendererStatusChange Callback that is fired when the renderer in the iframe is ready
+ * @param showWaitSpinner Defines if the page loading should be indicated by a wait spinner instead of the page loading animation.
  */
 export const RendererIframe: React.FC<RendererIframeProps> = ({
   markdownContentLines,
@@ -61,7 +63,8 @@ export const RendererIframe: React.FC<RendererIframeProps> = ({
   frameClasses,
   rendererType,
   adaptFrameHeightToContent,
-  onRendererStatusChange
+  onRendererStatusChange,
+  showWaitSpinner = false
 }) => {
   const [rendererReady, setRendererReady] = useState<boolean>(false)
   const frameReference = useRef<HTMLIFrameElement>(null)
@@ -152,9 +155,14 @@ export const RendererIframe: React.FC<RendererIframeProps> = ({
     useCallback(() => onMakeScrollSource?.(), [onMakeScrollSource])
   )
 
+  const frameClassNames = useMemo(
+    () => concatCssClasses({ 'd-none': !rendererReady && showWaitSpinner }, 'border-0', styles.frame, frameClasses),
+    [frameClasses, rendererReady, showWaitSpinner]
+  )
+
   return (
     <Fragment>
-      <ShowIf condition={!rendererReady}>
+      <ShowIf condition={!rendererReady && showWaitSpinner}>
         <WaitSpinner />
       </ShowIf>
       <iframe
@@ -166,7 +174,7 @@ export const RendererIframe: React.FC<RendererIframeProps> = ({
         allowFullScreen={true}
         ref={frameReference}
         referrerPolicy={'no-referrer'}
-        className={concatCssClasses('border-0', styles.frame, frameClasses)}
+        className={frameClassNames}
         allow={'clipboard-write'}
         {...cypressAttribute('renderer-ready', rendererReady ? 'true' : 'false')}
         {...cypressAttribute('renderer-type', rendererType)}

frontend/src/components/editor-page/app-bar/cheatsheet/cheatsheet-entry-pane.tsx

@@ -78,6 +78,7 @@ export const CheatsheetEntryPane: React.FC<CheatsheetRendererProps> = ({ extensi
             adaptFrameHeightToContent={true}
             rendererType={RendererType.SIMPLE}
             markdownContentLines={lines}
+            showWaitSpinner={true}
           />
         </ListGroupItem>
       </ExtensionEventEmitterProvider>

frontend/src/components/intro-page/intro-custom-content.tsx

@@ -32,6 +32,7 @@ export const IntroCustomContent: React.FC = () => {
         markdownContentLines={value as string[]}
         rendererType={RendererType.SIMPLE}
         adaptFrameHeightToContent={true}
+        showWaitSpinner={true}
       />
     </AsyncLoadingBoundary>
   )