QA-15268: Change preview loading (#1777)

* Change preview loading * QA-14926 : do not load assets for page configuration + avoid flickering effect on content change
Jahia · Dec 4, 2024 · 272fc11 · 272fc11
1 parent dc479c1
commit 272fc11
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 49 deletions.
diff --git a/pom.xml b/pom.xml
@@ -48,7 +48,7 @@
         <jahia-module-type>system</jahia-module-type>
         <yarn.arguments>build:production</yarn.arguments>
         <require-capability>osgi.extender;filter:="(osgi.extender=org.jahia.bundles.blueprint.extender.config)"</require-capability>
-	<jahia-module-signature>MCwCFHCtnj+P1xhvdTUewCQnP1MOcum5AhRASPcyKZR6Sycr4VEBqyy3z4DkTg==</jahia-module-signature>
+	    <jahia-module-signature>MCwCFHCtnj+P1xhvdTUewCQnP1MOcum5AhRASPcyKZR6Sycr4VEBqyy3z4DkTg==</jahia-module-signature>
         <jahia-depends>app-shell=2.7,graphql-dxm-provider=2.19.1,jcontent=2.9</jahia-depends>
         <jahia.plugin.version>6.9</jahia.plugin.version>
         <import-package>

diff --git a/...vascript/editorTabs/EditPanelContent/Preview/PreviewViewers/IframeViewer/IframeViewer.jsx b/...vascript/editorTabs/EditPanelContent/Preview/PreviewViewers/IframeViewer/IframeViewer.jsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import PropTypes from 'prop-types';
 import {Paper} from '@material-ui/core';
 import styles from './IframeViewer.scss';
@@ -49,61 +49,53 @@ function loadAssets(assets, iframeDocument) {
     return Promise.all(assets.map(asset => loadAsset(asset, iframeHeadEl)));
 }
 
-function writeInIframe(html, iframeWindow) {
-    return new Promise((resolve, reject) => {
-        iframeWindow.document.open();
-        iframeWindow.onload = resolve;
-        iframeWindow.onerror = reject;
-        iframeWindow.document.write(html);
-        iframeWindow.document.close();
-    });
-}
-
 export const IframeViewer = ({previewContext, data, onContentNotFound}) => {
     const [loading, setLoading] = useState(true);
     const editorContext = useContentEditorContext();
     const {t} = useTranslation('content-editor');
     const iframeRef = useRef(null);
+    const onLoadTimeoutRef = useRef(null);
+    let displayValue = data && data.nodeByPath && data.nodeByPath.renderedContent ? data.nodeByPath.renderedContent.output : '';
+    if (displayValue === '') {
+        displayValue = t('label.contentManager.contentPreview.noViewAvailable');
+    }
 
-    const renderIFrame = useCallback(() => {
-        const element = iframeRef.current;
-
-        if (!element) {
-            return;
-        }
-
+    useEffect(() => {
         setLoading(true);
-        let displayValue = data && data.nodeByPath && data.nodeByPath.renderedContent ? data.nodeByPath.renderedContent.output : '';
-        if (displayValue === '') {
-            displayValue = t('label.contentManager.contentPreview.noViewAvailable');
-        }
-
-        const iframeWindow = element.contentWindow || element;
-        writeInIframe(displayValue, iframeWindow)
-            .then(() => {
-                iframeWindow.document.body.setAttribute('style', 'pointer-events: none');
-            })
-            .then(() => {
+        // Add a timer to always remove the loader and click on links after 5 seconds
+        onLoadTimeoutRef.current = setTimeout(() => {
+            console.debug('iframe onLoad did not trigger, remove loader and disable click events');
+            const element = iframeRef.current;
+            const iframeWindow = element.contentWindow || element;
+            iframeWindow?.document?.body?.setAttribute('style', 'pointer-events: none');
+            setLoading(false);
+        }, 5000);
+        return () => clearTimeout(onLoadTimeoutRef.current);
+    }, [displayValue]);
+
+    const onLoad = () => {
+        try {
+            console.debug('Preview loaded, add assets and remove loader');
+            const element = iframeRef.current;
+            const iframeWindow = element.contentWindow || element;
+            iframeWindow.document.body.setAttribute('style', 'pointer-events: none');
+
+            if (previewContext.contextConfiguration !== 'page') {
                 const assets = data && data.nodeByPath && data.nodeByPath.renderedContent ?
-                    data.nodeByPath.renderedContent.staticAssets :
-                    [];
-                return loadAssets(assets, iframeWindow.document);
-            })
-            .catch(err => console.error('Error in the preview', err))
-            .then(() => {
-                // No zoom on full if no content wrapped in the page
-                if (previewContext.requestAttributes) {
-                    zoom(iframeWindow.document, onContentNotFound, editorContext);
-                }
-            })
-            .then(() => {
-                setLoading(false);
-            });
-    }, [data, editorContext, onContentNotFound, previewContext.requestAttributes, t]);
+                    data.nodeByPath.renderedContent.staticAssets : [];
+                loadAssets(assets, iframeWindow.document);
+            }
+
+            if (previewContext.requestAttributes) {
+                zoom(iframeWindow.document, onContentNotFound, editorContext);
+            }
+        } catch (e) {
+            console.error('Error while processing preview', e);
+        }
 
-    useEffect(() => {
-        renderIFrame();
-    }, [renderIFrame]);
+        setLoading(false);
+        clearTimeout(onLoadTimeoutRef.current);
+    };
 
     return (
         <Paper elevation={1} classes={{root: styles.contentPaper}}>
@@ -112,6 +104,9 @@ export const IframeViewer = ({previewContext, data, onContentNotFound}) => {
                     aria-labelledby="preview-tab"
                     data-sel-role={previewContext.workspace + '-preview-frame'}
                     className={`${styles.iframe} ${loading ? styles.iframeLoading : ''}`}
+                    srcDoc={displayValue}
+                    sandbox="allow-same-origin allow-scripts"
+                    onLoad={onLoad}
             />
         </Paper>
     );
@@ -120,7 +115,8 @@ export const IframeViewer = ({previewContext, data, onContentNotFound}) => {
 IframeViewer.propTypes = {
     previewContext: PropTypes.shape({
         workspace: PropTypes.string.isRequired,
-        requestAttributes: PropTypes.array
+        requestAttributes: PropTypes.array,
+        contextConfiguration: PropTypes.string
     }).isRequired,
     onContentNotFound: PropTypes.func.isRequired,
     data: PropTypes.object.isRequired