From bc81d9c7de671fea0bc155911ee11598a1b920c2 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Fri, 13 Sep 2024 17:31:26 +0100
Subject: [PATCH] feat: add waitForStyles option to iframe config

---
 .../docs/pages/docs/api-reference/components/puck.mdx | 11 ++++++++---
 .../core/components/Puck/components/Canvas/index.tsx  |  2 +-
 packages/core/components/Puck/index.tsx               |  1 +
 packages/core/types/API/index.ts                      |  1 +
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/apps/docs/pages/docs/api-reference/components/puck.mdx b/apps/docs/pages/docs/api-reference/components/puck.mdx
index fc294c9cb..3bd0f05a7 100644
--- a/apps/docs/pages/docs/api-reference/components/puck.mdx
+++ b/apps/docs/pages/docs/api-reference/components/puck.mdx
@@ -173,9 +173,10 @@ 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`
 
@@ -183,6 +184,10 @@ 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
index eef7cb71f..e46571572 100644
--- 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
index bfa92b895..35845cecb 100644
--- 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
index 588c21541..b0dd8a3ef 100644
--- 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> = (