feat: add waitForStyles option to iframe config

measuredco · Sep 14, 2024 · bc81d9c · bc81d9c
1 parent cd4438e
commit bc81d9c
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/apps/docs/pages/docs/api-reference/components/puck.mdx b/apps/docs/pages/docs/api-reference/components/puck.mdx
@@ -173,16 +173,21 @@ export function Editor() {
 
 #### iframe params
 
-| Param                 | Example          | Type    | Status |
-| --------------------- | ---------------- | ------- | ------ |
-| [`enabled`](#enabled) | `enabled: false` | boolean | -      |
+| Param                           | Example                | Type    | Status |
+| ------------------------------- | ---------------------- | ------- | ------ |
+| [`enabled`](#enabled)           | `enabled: false`       | boolean | -      |
+| [`waitForStyles`](#deferrender) | `waitForStyles: false` | boolean | -      |
 
 ##### `enabled`
 
 Render the Puck preview within iframe. Defaults to `true`.
 
 Disabling iframes will also disable [viewports](#viewports).
 
+##### `waitForStyles`
+
+Defer rendering of the Puck preview until the iframe styles have loaded, showing a spinner. Defaults to `true`.
+
 ### `initialHistory`
 
 Sets the undo/redo Puck history state when using the `usePuck` [history API](/docs/api-reference/functions/use-puck#history).

diff --git a/packages/core/components/Puck/components/Canvas/index.tsx b/packages/core/components/Puck/components/Canvas/index.tsx
@@ -120,7 +120,7 @@ export const Canvas = () => {
   return (
     <div
       className={getClassName({
-        ready: status === "READY" || !iframe.enabled,
+        ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
         showLoader,
       })}
       onClick={() =>

diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
@@ -121,6 +121,7 @@ export function Puck<
 }) {
   const iframe: IframeConfig = {
     enabled: true,
+    waitForStyles: true,
     ..._iframe,
   };
 

diff --git a/packages/core/types/API/index.ts b/packages/core/types/API/index.ts
@@ -13,6 +13,7 @@ export type Permissions = {
 
 export type IframeConfig = {
   enabled?: boolean;
+  waitForStyles?: boolean;
 };
 
 export type OnAction<UserData extends Data = Data> = (