refactor: don't load dnd until client is ready

packages/core/components/DragDropContext/index.tsx

@@ -0,0 +1,15 @@
+import {
+  DragDropContext as DndDragDropContext,
+  DragDropContextProps,
+} from "@measured/dnd";
+import { useAppContext } from "../Puck/context";
+
+const DefaultDragDropContext = ({ children }: DragDropContextProps) => children;
+
+export const DragDropContext = (props: DragDropContextProps) => {
+  const { status } = useAppContext();
+
+  const El = status === "READY" ? DndDragDropContext : DefaultDragDropContext;
+
+  return <El {...props} />;
+};

packages/core/components/Draggable/index.tsx

@@ -3,7 +3,39 @@ import {
   Draggable as DndDraggable,
   DraggableProvided,
   DraggableStateSnapshot,
+  DraggableProps,
+  DraggableRubric,
 } from "@measured/dnd";
+import { useAppContext } from "../Puck/context";
+
+const defaultProvided: DraggableProvided = {
+  draggableProps: {
+    "data-rfd-draggable-context-id": "",
+    "data-rfd-draggable-id": "",
+  },
+  dragHandleProps: null,
+  innerRef: () => null,
+};
+
+const defaultSnapshot: DraggableStateSnapshot = {
+  isDragging: false,
+  isDropAnimating: false,
+  isClone: false,
+  dropAnimation: null,
+  draggingOver: null,
+  combineWith: null,
+  combineTargetFor: null,
+  mode: null,
+};
+
+const defaultRubric: DraggableRubric = {
+  draggableId: "",
+  type: "",
+  source: { droppableId: "", index: 0 },
+};
+
+export const DefaultDraggable = ({ children }: DraggableProps) =>
+  children(defaultProvided, defaultSnapshot, defaultRubric);
 
 export const Draggable = ({
   className,
@@ -28,12 +60,12 @@ export const Draggable = ({
   disableAnimations?: boolean;
   isDragDisabled?: boolean;
 }) => {
+  const { status } = useAppContext();
+
+  const El = status === "READY" ? DndDraggable : DefaultDraggable;
+
   return (
-    <DndDraggable
-      draggableId={id}
-      index={index}
-      isDragDisabled={isDragDisabled}
-    >
+    <El draggableId={id} index={index} isDragDisabled={isDragDisabled}>
       {(provided, snapshot) => (
         <>
           <div
@@ -62,6 +94,6 @@ export const Draggable = ({
           )}
         </>
       )}
-    </DndDraggable>
+    </El>
   );
 };

packages/core/components/DraggableComponent/index.tsx

@@ -6,6 +6,7 @@ import { Copy, Trash } from "lucide-react";
 import { useModifierHeld } from "../../lib/use-modifier-held";
 import { ClipLoader } from "react-spinners";
 import { useAppContext } from "../Puck/context";
+import { DefaultDraggable } from "../Draggable";
 
 const getClassName = getClassNameFactory("DraggableComponent", styles);
 
@@ -61,15 +62,14 @@ export const DraggableComponent = ({
   const { zoomConfig } = useAppContext();
   const isModifierHeld = useModifierHeld("Alt");
 
+  const { status } = useAppContext();
+
+  const El = status === "READY" ? Draggable : DefaultDraggable;
+
   useEffect(onMount, []);
 
   return (
-    <Draggable
-      key={id}
-      draggableId={id}
-      index={index}
-      isDragDisabled={isDragDisabled}
-    >
+    <El key={id} draggableId={id} index={index} isDragDisabled={isDragDisabled}>
       {(provided, snapshot) => (
         <div
           ref={provided.innerRef}
@@ -130,6 +130,6 @@ export const DraggableComponent = ({
           <div className={getClassName("contents")}>{children}</div>
         </div>
       )}
-    </Draggable>
+    </El>
   );
 };

packages/core/components/Drawer/index.tsx

@@ -1,4 +1,4 @@
-import { Droppable } from "@measured/dnd";
+import { Droppable } from "../Droppable";
 import styles from "./styles.module.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
 import { Draggable } from "../Draggable";

packages/core/components/DropZone/index.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties, useContext, useEffect } from "react";
 import { DraggableComponent } from "../DraggableComponent";
-import { Droppable } from "@measured/dnd";
+import { Droppable } from "../Droppable";
 import { getItem } from "../../lib/get-item";
 import { setupZone } from "../../lib/setup-zone";
 import { rootDroppableId } from "../../lib/root-droppable-id";

packages/core/components/Droppable/index.tsx

@@ -0,0 +1,34 @@
+import {
+  Droppable as DndDroppable,
+  DroppableProps,
+  DroppableProvided,
+  DroppableStateSnapshot,
+} from "@measured/dnd";
+import { useAppContext } from "../Puck/context";
+
+const defaultProvided: DroppableProvided = {
+  droppableProps: {
+    "data-rfd-droppable-context-id": "",
+    "data-rfd-droppable-id": "",
+  },
+  placeholder: null,
+  innerRef: () => null,
+};
+
+const defaultSnapshot: DroppableStateSnapshot = {
+  isDraggingOver: false,
+  draggingOverWith: null,
+  draggingFromThisWith: null,
+  isUsingPlaceholder: false,
+};
+
+const DefaultDroppable = ({ children }: DroppableProps) =>
+  children(defaultProvided, defaultSnapshot);
+
+export const Droppable = (props: DroppableProps) => {
+  const { status } = useAppContext();
+
+  const El = status === "READY" ? DndDroppable : DefaultDroppable;
+
+  return <El {...props} />;
+};

packages/core/components/InputOrGroup/fields/ArrayField/index.tsx

@@ -4,13 +4,13 @@ import { List, Plus, Trash } from "lucide-react";
 import { FieldLabelInternal, InputOrGroup, type InputProps } from "../..";
 import { IconButton } from "../../../IconButton";
 import { reorder, replace } from "../../../../lib";
-import { Droppable } from "@measured/dnd";
-import { DragDropContext } from "@measured/dnd";
+import { Droppable } from "../../../Droppable";
 import { Draggable } from "../../../Draggable";
 import { useCallback, useEffect, useState } from "react";
 import { DragIcon } from "../../../DragIcon";
 import { ArrayState, ItemWithId } from "../../../../types/Config";
 import { useAppContext } from "../../../Puck/context";
+import { DragDropContext } from "../../../DragDropContext";
 
 const getClassName = getClassNameFactory("ArrayField", styles);
 const getClassNameItem = getClassNameFactory("ArrayFieldItem", styles);

packages/core/components/Puck/context.tsx

@@ -1,4 +1,10 @@
-import { ReactNode, createContext, useContext, useState } from "react";
+import {
+  ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { AppState, Config, UiState } from "../../types/Config";
 import { PuckAction } from "../../reducer";
 import { getItem } from "../../lib/get-item";
@@ -28,6 +34,8 @@ export const defaultAppState: AppState = {
   },
 };
 
+export type Status = "LOADING" | "READY";
+
 type ZoomConfig = {
   autoZoom: number;
   rootHeight: number;
@@ -48,6 +56,7 @@ type AppContext<
   viewports: Viewports;
   zoomConfig: ZoomConfig;
   setZoomConfig: (zoomConfig: ZoomConfig) => void;
+  status: Status;
 };
 
 const defaultContext: AppContext = {
@@ -66,6 +75,7 @@ const defaultContext: AppContext = {
     zoom: 1,
   },
   setZoomConfig: () => null,
+  status: "LOADING",
 };
 
 export const appContext = createContext<AppContext>(defaultContext);
@@ -75,12 +85,22 @@ export const AppProvider = ({
   value,
 }: {
   children: ReactNode;
-  value: Omit<AppContext, "zoomConfig" | "setZoomConfig">;
+  value: Omit<AppContext, "zoomConfig" | "setZoomConfig" | "status">;
 }) => {
   const [zoomConfig, setZoomConfig] = useState(defaultContext.zoomConfig);
 
+  const [status, setStatus] = useState<Status>("LOADING");
+
+  // App is ready when client has loaded, after initial render
+  // This triggers DropZones to activate
+  useEffect(() => {
+    setStatus("READY");
+  }, []);
+
   return (
-    <appContext.Provider value={{ ...value, zoomConfig, setZoomConfig }}>
+    <appContext.Provider
+      value={{ ...value, zoomConfig, setZoomConfig, status }}
+    >
       {children}
     </appContext.Provider>
   );

packages/core/components/Puck/index.tsx

@@ -7,7 +7,7 @@ import {
   useReducer,
   useState,
 } from "react";
-import { DragDropContext, DragStart, DragUpdate } from "@measured/dnd";
+import { DragStart, DragUpdate } from "@measured/dnd";
 
 import type { AppState, Config, Data, UiState } from "../../types/Config";
 import { Button } from "../Button";
@@ -45,6 +45,7 @@ import { useHistoryStore } from "../../lib/use-history-store";
 import { Canvas } from "./components/Canvas";
 import { defaultViewports } from "../ViewportControls/default-viewports";
 import { Viewports } from "../../types/Viewports";
+import { DragDropContext } from "../DragDropContext";
 
 const getClassName = getClassNameFactory("Puck", styles);