feat: only load preview frame when needed (#544)

Author: kptdobe

blocks/edit/da-content/da-content.js

@@ -11,6 +11,8 @@ export default class DaContent extends LitElement {
     permissions: { attribute: false },
     proseEl: { attribute: false },
     wsProvider: { attribute: false },
+    startPreviewing: { attribute: false },
+    stopPreviewing: { attribute: false },
     _editorLoaded: { state: true },
     _versionUrl: { state: true },
     _ueUrl: { state: true },
@@ -29,8 +31,18 @@ export default class DaContent extends LitElement {
   }
 
   showPreview() {
-    this.classList.add('show-preview');
-    this.shadowRoot.querySelector('da-preview').classList.add('show-preview');
+    this.daPreview.showPreview(() => {
+      if (this.startPreviewing) {
+        this.startPreviewing();
+      }
+    });
+  }
+
+  hidePreview() {
+    this.daPreview.hidePreview();
+    if (this.stopPreviewing) {
+      this.stopPreviewing();
+    }
   }
 
   showVersions() {
@@ -80,6 +92,10 @@ export default class DaContent extends LitElement {
     return this.shadowRoot.querySelector('da-versions');
   }
 
+  get daPreview() {
+    return this.shadowRoot.querySelector('da-preview');
+  }
+
   render() {
     return html`
       <div class="editor-wrapper">

blocks/edit/da-preview/da-preview.js

@@ -33,6 +33,26 @@ export default class DaPreview extends LitElement {
     return path.endsWith('index') ? path.substring(0, path.lastIndexOf('/') + 1) : path;
   }
 
+  showPreview(callback) {
+    const src = this.iframe.getAttribute('src');
+
+    const show = () => {
+      callback();
+      // leave a small delay to allow the body replacement to complete
+      setTimeout(() => {
+        this.classList.add('show-preview');
+        this._daContent.classList.add('show-preview');
+      }, 500);
+    };
+
+    if (!src) {
+      this.onFrameLoaded = show;
+      this.iframe.src = `${this.formatPath(this.path)}?martech=off&dapreview=${this.getEnv()}`;
+    } else {
+      show();
+    }
+  }
+
   hidePreview() {
     this._daContent.classList.remove('show-preview');
     this.classList.remove('show-preview');
@@ -52,13 +72,17 @@ export default class DaPreview extends LitElement {
   }
 
   iframeLoaded({ target }) {
+    const src = target.getAttribute('src');
+    if (!src) return;
+
     const channel = new MessageChannel();
     this.port1 = channel.port1;
     this.port2 = channel.port2;
 
     setTimeout(() => {
       this.port1.onmessage = (e) => { this.setHeight(e.data); };
       target.contentWindow.postMessage({ init: true }, '*', [this.port2]);
+      if (this.onFrameLoaded) this.onFrameLoaded();
     }, 1500);
   }
 
@@ -74,10 +98,10 @@ export default class DaPreview extends LitElement {
             class="da-preview-menuitem set-${key}"
             @click=${() => this.setWidth(key)}>
           </span>`)}
-        <span class="da-preview-menuitem" @click=${this.hidePreview}></span>
+        <span class="da-preview-menuitem" @click=${() => this._daContent.hidePreview()}></span>
       </div>
       <iframe
-        src="${this.formatPath(this.path)}?martech=off&dapreview=${this.getEnv()}"
+        src=""
         @load=${this.iframeLoaded}
         allow="clipboard-write *"
         scrolling="no"></iframe>

blocks/edit/edit.js

@@ -3,6 +3,8 @@ import getPathDetails from '../shared/pathDetails.js';
 let prose;
 let proseEl;
 let wsProvider;
+let startPreviewing;
+let stopPreviewing;
 
 async function setUI(el, utils) {
   const details = getPathDetails();
@@ -43,9 +45,17 @@ async function setUI(el, utils) {
     daContent.wsProvider = undefined;
   }
 
-  ({ proseEl, wsProvider } = prose.default({ path: details.sourceUrl, permissions }));
+  ({
+    proseEl,
+    wsProvider,
+    startPreviewing,
+    stopPreviewing,
+  } = prose.default({ path: details.sourceUrl, permissions }));
+
   daContent.proseEl = proseEl;
   daContent.wsProvider = wsProvider;
+  daContent.startPreviewing = startPreviewing;
+  daContent.stopPreviewing = stopPreviewing;
 }
 
 export default async function init(el) {

blocks/edit/prose/index.js

@@ -85,15 +85,18 @@ function handleProseLoaded(editor) {
     const opts = { bubbles: true, composed: true };
     const event = new CustomEvent('proseloaded', opts);
     daEditor.dispatchEvent(event);
-
-    // Give the preview elements time to create
-    setTimeout(() => {
-      setPreviewBody();
-      pollForUpdates();
-    }, 3000);
   }, 3000);
 }
 
+function startPreviewing() {
+  setPreviewBody();
+  pollForUpdates();
+}
+
+function stopPreviewing() {
+  if (updatePoller) clearInterval(updatePoller);
+}
+
 function handleAwarenessUpdates(wsProvider, daTitle, win) {
   const users = new Set();
 
@@ -323,5 +326,5 @@ export default function initProse({ path, permissions }) {
   document.execCommand('enableObjectResizing', false, 'false');
   document.execCommand('enableInlineTableEditing', false, 'false');
 
-  return { proseEl: editor, wsProvider };
+  return { proseEl: editor, wsProvider, startPreviewing, stopPreviewing };
 }