feat: show spinner if iframe load takes over 500ms

measuredco · Sep 3, 2024 · cfecf54 · cfecf54
1 parent f761e5f
commit cfecf54
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/packages/core/components/Puck/components/Canvas/index.tsx b/packages/core/components/Puck/components/Canvas/index.tsx
@@ -14,6 +14,7 @@ import { getClassNameFactory } from "../../../../lib";
 import { Preview } from "../Preview";
 import { getZoomConfig } from "../../../../lib/get-zoom-config";
 import { AppState } from "../../../../types";
+import { Loader } from "../../../Loader";
 
 const getClassName = getClassNameFactory("PuckCanvas", styles);
 
@@ -100,10 +101,19 @@ export const Canvas = () => {
     };
   }, []);
 
+  const [showLoader, setShowLoader] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setShowLoader(true);
+    }, 500);
+  }, []);
+
   return (
     <div
       className={getClassName({
         ready: status === "READY" || !iframe.enabled,
+        showLoader,
       })}
       onClick={() =>
         dispatch({
@@ -164,6 +174,9 @@ export const Canvas = () => {
             <Preview />
           </CustomPreview>
         </div>
+        <div className={getClassName("loader")}>
+          <Loader size={24} />
+        </div>
       </div>
     </div>
   );

diff --git a/packages/core/components/Puck/components/Canvas/styles.module.css b/packages/core/components/Puck/components/Canvas/styles.module.css
@@ -55,5 +55,24 @@
 
 .PuckCanvas--ready .PuckCanvas-root {
   opacity: 1;
-  transition: opacity 150ms ease-out;
+}
+
+.PuckCanvas-loader {
+  align-items: center;
+  color: var(--puck-color-grey-06);
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  transition: opacity 250ms ease-out;
+  opacity: 0;
+}
+
+.PuckCanvas--showLoader .PuckCanvas-loader {
+  opacity: 1;
+}
+
+.PuckCanvas--showLoader.PuckCanvas--ready .PuckCanvas-loader {
+  opacity: 0;
+  height: 0;
+  transition: none;
 }