chore: defer iframe render until styles have loaded

measuredco · Mar 23, 2024 · c1899a5 · c1899a5
1 parent 0e49afe
commit c1899a5
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 17 deletions.
diff --git a/packages/core/components/Puck/components/Preview/index.tsx b/packages/core/components/Puck/components/Preview/index.tsx
@@ -1,6 +1,6 @@
 import { DropZone } from "../../../DropZone";
 import { rootDroppableId } from "../../../../lib/root-droppable-id";
-import { useCallback, useRef } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useAppContext } from "../../context";
 import AutoFrame from "@measured/auto-frame-component";
 import styles from "./styles.module.css";
@@ -24,24 +24,33 @@ export const Preview = ({ id = "puck-preview" }: { id?: string }) => {
 
   const ref = useRef<HTMLIFrameElement>(null);
 
+  const [stylesLoaded, setStylesLoaded] = useState(false);
+
   return (
     <div
-      className={getClassName()}
+      className={getClassName({ stylesLoaded })}
       id={id}
       onClick={() => {
         dispatch({ type: "setUi", ui: { ...state.ui, itemSelector: null } });
       }}
     >
-      <AutoFrame
-        id="preview-iframe"
-        className={getClassName("iframe")}
-        data-rfd-iframe
-        ref={ref}
-      >
-        <Page dispatch={dispatch} state={state} {...rootProps}>
-          <DropZone zone={rootDroppableId} />
-        </Page>
-      </AutoFrame>
+      <div className={getClassName("content")}>
+        <AutoFrame
+          id="preview-iframe"
+          className={getClassName("iframe")}
+          data-rfd-iframe
+          ref={ref}
+          debug
+          onStylesLoaded={() => {
+            console.log("callback");
+            setStylesLoaded(true);
+          }}
+        >
+          <Page dispatch={dispatch} state={state} {...rootProps}>
+            <DropZone zone={rootDroppableId} />
+          </Page>
+        </AutoFrame>
+      </div>
     </div>
   );
 };
diff --git a/packages/core/components/Puck/components/Preview/styles.module.css b/packages/core/components/Puck/components/Preview/styles.module.css
@@ -7,3 +7,14 @@
   height: 100%;
   width: 100%;
 }
+
+.PuckPreview-content {
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  transition: opacity 150ms ease-out;
+}
+
+.PuckPreview--stylesLoaded .PuckPreview-content {
+  opacity: 1;
+}
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -59,7 +59,7 @@
     "typescript": "^4.5.2"
   },
   "dependencies": {
-    "@measured/auto-frame-component": "0.1.0-canary.4686711",
+    "@measured/auto-frame-component": "0.1.0",
     "@measured/dnd": "16.6.0-canary.dcf051d",
     "deep-diff": "^1.0.2",
     "react-hotkeys-hook": "^4.4.1",

diff --git a/yarn.lock b/yarn.lock
@@ -1440,10 +1440,10 @@
     "@types/mdx" "^2.0.0"
     "@types/react" ">=16"
 
-"@measured/auto-frame-component@0.1.0-canary.4686711":
-  version "0.1.0-canary.4686711"
-  resolved "https://registry.yarnpkg.com/@measured/auto-frame-component/-/auto-frame-component-0.1.0-canary.4686711.tgz#7ed8892507da83a1d5fb6d59ded7a3e15f9cd286"
-  integrity sha512-B3Q38ECW7xc4900PBLvHdEiws+rjx1BdHS+EEIBsw9kadT+4NMjdoTFB6wQKxtGEumI2A6tBa9IoX6UkecBkzQ==
+"@measured/auto-frame-component@0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@measured/auto-frame-component/-/auto-frame-component-0.1.0.tgz#83c9186f21b837d95185ef8336b269450f8f816a"
+  integrity sha512-5pZnmTxI9a4MXE7WTneGEXpU/6FKiyw8BI+93NVQRfEudmZNUldiSihp0TlP1ga8lf9V3wh2v7Pv7LOyyo1ZxA==
   dependencies:
     object-hash "^3.0.0"
     react-frame-component "5.2.6"