diff --git a/frontend/src/components/common/motd-modal/__snapshots__/motd-modal.spec.tsx.snap b/frontend/src/components/common/motd-modal/__snapshots__/motd-modal.spec.tsx.snap
index 9593c4332..02a70a695 100644
--- a/frontend/src/components/common/motd-modal/__snapshots__/motd-modal.spec.tsx.snap
+++ b/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}
{
rendererType={RendererType.SIMPLE}
markdownContentLines={lines as string[]}
adaptFrameHeightToContent={true}
+ showWaitSpinner={true}
/>
diff --git a/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx b/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx
index 7017cc69a..591d46979 100644
--- a/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx
+++ b/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx
@@ -34,6 +34,7 @@ export interface RendererIframeProps extends Omit 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 = ({
markdownContentLines,
@@ -61,7 +63,8 @@ export const RendererIframe: React.FC = ({
frameClasses,
rendererType,
adaptFrameHeightToContent,
- onRendererStatusChange
+ onRendererStatusChange,
+ showWaitSpinner = false
}) => {
const [rendererReady, setRendererReady] = useState(false)
const frameReference = useRef(null)
@@ -152,9 +155,14 @@ export const RendererIframe: React.FC = ({
useCallback(() => onMakeScrollSource?.(), [onMakeScrollSource])
)
+ const frameClassNames = useMemo(
+ () => concatCssClasses({ 'd-none': !rendererReady && showWaitSpinner }, 'border-0', styles.frame, frameClasses),
+ [frameClasses, rendererReady, showWaitSpinner]
+ )
+
return (
-
+