From f3937220117fb8bffb8b3e2e6c2d6a4cb17ad112 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Fri, 16 Sep 2022 14:05:13 +0200
Subject: [PATCH 1/2] wait for designerReady event on the canvas before
 publishing data over postMessage

It is possible that the js of designer is loaded later than the js of canvas, because everything is server-rendered

we just ran into a case where disabling cache has hit the bug
---
 apps/designer/app/canvas/canvas.tsx              |  4 +++-
 .../app/canvas/shared/use-designer-ready.ts      | 16 ++++++++++++++++
 apps/designer/app/designer/designer.tsx          |  3 ++-
 3 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 apps/designer/app/canvas/shared/use-designer-ready.ts

diff --git a/apps/designer/app/canvas/canvas.tsx b/apps/designer/app/canvas/canvas.tsx
index f5b3d76933..ce422c4fc1 100644
--- a/apps/designer/app/canvas/canvas.tsx
+++ b/apps/designer/app/canvas/canvas.tsx
@@ -46,6 +46,7 @@ import { usePublishScrollState } from "./shared/use-publish-scroll-state";
 import { useDragAndDrop } from "./shared/use-drag-drop";
 import { setInstanceChildrenMutable } from "~/shared/tree-utils";
 import { CanvasData } from "~/shared/db";
+import { useDesignerReady } from "./shared/use-designer-ready";
 
 registerContainers();
 
@@ -118,6 +119,7 @@ export const Canvas = ({ data }: CanvasProps): JSX.Element | null => {
   if (data.tree === null) {
     throw new Error("Tree is null");
   }
+  const isDesignerReady = useDesignerReady();
   useInitializeBreakpoints(data.breakpoints);
   globalStyles();
   useAllUserProps(data.props);
@@ -129,7 +131,7 @@ export const Canvas = ({ data }: CanvasProps): JSX.Element | null => {
 
   if (elements === undefined) return null;
 
-  if (isPreviewMode) {
+  if (isPreviewMode || isDesignerReady === false) {
     return elements;
   }
 
diff --git a/apps/designer/app/canvas/shared/use-designer-ready.ts b/apps/designer/app/canvas/shared/use-designer-ready.ts
new file mode 100644
index 0000000000..81108a26f8
--- /dev/null
+++ b/apps/designer/app/canvas/shared/use-designer-ready.ts
@@ -0,0 +1,16 @@
+import { useState } from "react";
+import { useSubscribe } from "~/shared/pubsub";
+
+declare module "~/shared/pubsub" {
+  export interface PubsubMap {
+    designerReady: undefined;
+  }
+}
+
+export const useDesignerReady = () => {
+  const [isReady, setIsReady] = useState<boolean>(false);
+  useSubscribe("designerReady", () => {
+    setIsReady(true);
+  });
+  return isReady;
+};
diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx
index a268d51991..d051a8258b 100644
--- a/apps/designer/app/designer/designer.tsx
+++ b/apps/designer/app/designer/designer.tsx
@@ -232,8 +232,9 @@ export const Designer = ({ config, project }: DesignerProps) => {
       publishRef.current = ref;
       onRefReadCanvasWidth(ref);
       onRefReadCanvas(ref);
+      publish({ type: "designerReady" });
     },
-    [publishRef, onRefReadCanvasWidth, onRefReadCanvas]
+    [publishRef, onRefReadCanvasWidth, onRefReadCanvas, publish]
   );
 
   return (

From 4587a9212f96fa02d7a959d898764a74690ce3c4 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Fri, 16 Sep 2022 14:07:02 +0200
Subject: [PATCH 2/2] comment the designerReady event

---
 apps/designer/app/designer/designer.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx
index d051a8258b..f3108aacaa 100644
--- a/apps/designer/app/designer/designer.tsx
+++ b/apps/designer/app/designer/designer.tsx
@@ -232,6 +232,8 @@ export const Designer = ({ config, project }: DesignerProps) => {
       publishRef.current = ref;
       onRefReadCanvasWidth(ref);
       onRefReadCanvas(ref);
+      // We publish this even to let canvas know that we are now listening to the events, otherwise if canvas loads faster than designer, which is possible with SSR,
+      // we can miss the events and designer will just not connect to the canvas.
       publish({ type: "designerReady" });
     },
     [publishRef, onRefReadCanvasWidth, onRefReadCanvas, publish]