Merge pull request #812 from processing/feat/perf

Fully unmount sketches that go out of frame

Author: davepagurek

src/components/CodeEmbed/frame.tsx

@@ -1,4 +1,4 @@
-import { useRef, useLayoutEffect, useEffect } from "preact/hooks";
+import { useRef, useLayoutEffect, useEffect, useState } from "preact/hooks";
 import { cdnLibraryUrl } from "@/src/globals/globals";
 
 interface CodeBundle {
@@ -86,6 +86,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
   const p5ScriptTag = document.getElementById(
     "p5ScriptTag",
   ) as HTMLScriptElement;
+  const [mounted, setMounted] = useState(false);
 
   // For performance, set the iframe to display:none when
   // not visible on the page. This will stop the browser
@@ -101,11 +102,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
       (entries) => {
         entries.forEach((entry) => {
           if (!iframeRef.current) return;
-          if (entry.isIntersecting) {
-            iframeRef.current.style.removeProperty("display");
-          } else {
-            iframeRef.current.style.display = "none";
-          }
+          setMounted(entry.isIntersecting);
         });
       },
       { rootMargin: "20px" },
@@ -118,6 +115,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
   useEffect(() => {
     (async () => {
       if (!p5ScriptTag || !iframeRef.current) return;
+      if (!mounted) return;
 
       /*
        * Uses postMessage to receive the text content of p5.min.js, to be included
@@ -148,7 +146,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
         return;
       }
     })();
-  }, [props.jsCode]);
+  }, [props.jsCode, mounted]);
 
   return (
     <div
@@ -157,13 +155,13 @@ export const CodeFrame = (props: CodeFrameProps) => {
     >
       <iframe
         ref={iframeRef}
-        srcDoc={wrapInMarkup({
+        srcDoc={mounted ? wrapInMarkup({
           js: props.jsCode,
           css: props.cssCode,
           htmlBody: props.htmlBodyCode,
           base: props.base,
           scripts: props.scripts,
-        })}
+        }) : undefined}
         sandbox="allow-scripts allow-popups allow-modals allow-forms allow-same-origin"
         aria-label="Code Preview"
         title="Code Preview"