diff --git a/.changeset/tender-boats-yell.md b/.changeset/tender-boats-yell.md
new file mode 100644
index 0000000000..b8f26555b5
--- /dev/null
+++ b/.changeset/tender-boats-yell.md
@@ -0,0 +1,5 @@
+---
+"@comet/cms-site": patch
+---
+
+Fix block preview not rendering before user interaction
diff --git a/packages/site/cms-site/src/iframebridge/useBlockPreviewFetch.tsx b/packages/site/cms-site/src/iframebridge/useBlockPreviewFetch.tsx
index 30ee15d478..071e0e4bad 100644
--- a/packages/site/cms-site/src/iframebridge/useBlockPreviewFetch.tsx
+++ b/packages/site/cms-site/src/iframebridge/useBlockPreviewFetch.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useState } from "react";
 
 import { createFetchInMemoryCache } from "../graphQLFetch/fetchInMemoryCache";
 import { convertPreviewDataToHeaders, createFetchWithDefaults, createGraphQLFetch, GraphQLFetch } from "../graphQLFetch/graphQLFetch";
@@ -16,16 +16,19 @@ export function useBlockPreviewFetch(apiUrl: string): { fetch: Fetch; graphQLFet
 export function useBlockPreviewFetch(apiUrl?: string | undefined): { fetch: Fetch; graphQLFetch?: GraphQLFetch };
 export function useBlockPreviewFetch(apiUrl?: string | undefined) {
     const { showOnlyVisible, graphQLApiUrl } = useIFrameBridge();
+    const [graphQLFetch, setGraphQLFetch] = useState<GraphQLFetch | undefined>(() =>
+        apiUrl ? createBlockPreviewFetch(apiUrl, !showOnlyVisible) : undefined,
+    );
 
-    const graphQLFetchRef = useRef(apiUrl ? createBlockPreviewFetch(apiUrl, !showOnlyVisible) : undefined);
     useEffect(() => {
         if (graphQLApiUrl) {
-            graphQLFetchRef.current = createBlockPreviewFetch(graphQLApiUrl, !showOnlyVisible);
+            // We need to use an updater function here because createBlockPreviewFetch's return value would otherwise be incorrectly treated as an updater function.
+            setGraphQLFetch(() => createBlockPreviewFetch(graphQLApiUrl, !showOnlyVisible));
         }
     }, [showOnlyVisible, graphQLApiUrl]);
 
     return {
-        graphQLFetch: graphQLFetchRef.current,
+        graphQLFetch,
         fetch: cachingFetch,
     };
 }