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 ( - +