@measured/puck 0.16.0-canary.937bb92 → 0.16.0-canary.94f16b2

package/dist/index.css

@@ -1732,7 +1732,7 @@ textarea._Input-input_3pq3z_47 {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
-._PuckCanvas_6zd4y_1 {
+._PuckCanvas_esbg1_1 {
   background: var(--puck-color-grey-11);
   display: flex;
   grid-area: editor;
@@ -1741,15 +1741,15 @@ textarea._Input-input_3pq3z_47 {
   overflow: auto;
 }
 @media (min-width: 1198px) {
-  ._PuckCanvas_6zd4y_1 {
+  ._PuckCanvas_esbg1_1 {
     padding: calc(var(--puck-space-px) * 1.5);
     padding-top: var(--puck-space-px);
   }
-  ._PuckCanvas_6zd4y_1:not(._PuckCanvas_6zd4y_1:has(._PuckCanvas-controls_6zd4y_16)) {
+  ._PuckCanvas_esbg1_1:not(._PuckCanvas_esbg1_1:has(._PuckCanvas-controls_esbg1_16)) {
     padding-top: calc(var(--puck-space-px) * 1.5);
   }
 }
-._PuckCanvas-inner_6zd4y_21 {
+._PuckCanvas-inner_esbg1_21 {
   box-sizing: border-box;
   display: flex;
   height: 100%;
@@ -1759,7 +1759,7 @@ textarea._Input-input_3pq3z_47 {
   position: relative;
   width: 100%;
 }
-._PuckCanvas-root_6zd4y_32 {
+._PuckCanvas-root_esbg1_32 {
   background: white;
   border: 1px solid var(--puck-color-grey-09);
   box-sizing: border-box;
@@ -1771,16 +1771,32 @@ textarea._Input-input_3pq3z_47 {
   opacity: 0;
 }
 @media (min-width: 1198px) {
-  ._PuckCanvas-root_6zd4y_32 {
+  ._PuckCanvas-root_esbg1_32 {
     min-width: unset;
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  ._PuckCanvas-root_6zd4y_32 {
+  ._PuckCanvas-root_esbg1_32 {
     transition: none !important;
   }
 }
-._PuckCanvas--ready_6zd4y_56 ._PuckCanvas-root_6zd4y_32 {
+._PuckCanvas--ready_esbg1_56 ._PuckCanvas-root_esbg1_32 {
   opacity: 1;
-  transition: opacity 150ms ease-out;
+}
+._PuckCanvas-loader_esbg1_60 {
+  align-items: center;
+  color: var(--puck-color-grey-06);
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  transition: opacity 250ms ease-out;
+  opacity: 0;
+}
+._PuckCanvas--showLoader_esbg1_70 ._PuckCanvas-loader_esbg1_60 {
+  opacity: 1;
+}
+._PuckCanvas--showLoader_esbg1_70._PuckCanvas--ready_esbg1_56 ._PuckCanvas-loader_esbg1_60 {
+  opacity: 0;
+  height: 0;
+  transition: none;
 }

package/dist/index.js

@@ -258,7 +258,16 @@ var Action = ({
   children,
   label,
   onClick
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: getClassName("action"), onClick, title: label, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "button",
+  {
+    type: "button",
+    className: getClassName("action"),
+    onClick,
+    title: label,
+    children
+  }
+);
 ActionBar.Action = Action;
 
 // components/AutoField/index.tsx
@@ -1456,6 +1465,7 @@ var ExternalInput = ({
           value && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "button",
             {
+              type: "button",
               className: getClassName10("detachButton"),
               onClick: () => {
                 onChange(null);
@@ -2927,6 +2937,7 @@ var SidebarSection = ({
             /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "button",
               {
+                type: "button",
                 className: getClassName19("breadcrumbLabel"),
                 onClick: () => setUi({ itemSelector: breadcrumb.selector }),
                 children: breadcrumb.label
@@ -3816,6 +3827,7 @@ var ComponentList = ({
     title && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "button",
       {
+        type: "button",
         className: getClassName22("title"),
         onClick: () => setUi({
           componentList: __spreadProps(__spreadValues({}, state.ui.componentList), {
@@ -4360,6 +4372,7 @@ var LayerTree = ({
               /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
                 "button",
                 {
+                  type: "button",
                   className: getClassNameLayer("clickable"),
                   onClick: () => {
                     if (isSelected) {
@@ -4849,7 +4862,7 @@ var ViewportControls = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_6zd4y_1", "PuckCanvas-controls": "_PuckCanvas-controls_6zd4y_16", "PuckCanvas-inner": "_PuckCanvas-inner_6zd4y_21", "PuckCanvas-root": "_PuckCanvas-root_6zd4y_32", "PuckCanvas--ready": "_PuckCanvas--ready_6zd4y_56" };
+var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_esbg1_1", "PuckCanvas-controls": "_PuckCanvas-controls_esbg1_16", "PuckCanvas-inner": "_PuckCanvas-inner_esbg1_21", "PuckCanvas-root": "_PuckCanvas-root_esbg1_32", "PuckCanvas--ready": "_PuckCanvas--ready_esbg1_56", "PuckCanvas-loader": "_PuckCanvas-loader_esbg1_60", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_esbg1_70" };
 
 // lib/get-zoom-config.ts
 init_react_import();
@@ -4941,11 +4954,18 @@ var Canvas = () => {
       observer.disconnect();
     };
   }, []);
+  const [showLoader, setShowLoader] = (0, import_react29.useState)(false);
+  (0, import_react29.useEffect)(() => {
+    setTimeout(() => {
+      setShowLoader(true);
+    }, 500);
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
       className: getClassName26({
-        ready: status === "READY" || !iframe.enabled
+        ready: status === "READY" || !iframe.enabled,
+        showLoader
       }),
       onClick: () => dispatch({
         type: "setUi",
@@ -4978,21 +4998,24 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName26("inner"), ref: frameRef, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-          "div",
-          {
-            className: getClassName26("root"),
-            style: {
-              width: iframe.enabled ? ui.viewports.current.width : "100%",
-              height: zoomConfig.rootHeight,
-              transform: iframe.enabled ? `scale(${zoomConfig.zoom})` : void 0,
-              transition: showTransition ? "width 150ms ease-out, height 150ms ease-out, transform 150ms ease-out" : "",
-              overflow: iframe.enabled ? void 0 : "auto"
-            },
-            suppressHydrationWarning: true,
-            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Preview, {}) })
-          }
-        ) })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getClassName26("inner"), ref: frameRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            "div",
+            {
+              className: getClassName26("root"),
+              style: {
+                width: iframe.enabled ? ui.viewports.current.width : "100%",
+                height: zoomConfig.rootHeight,
+                transform: iframe.enabled ? `scale(${zoomConfig.zoom})` : void 0,
+                transition: showTransition ? "width 150ms ease-out, height 150ms ease-out, transform 150ms ease-out" : "",
+                overflow: iframe.enabled ? void 0 : "auto"
+              },
+              suppressHydrationWarning: true,
+              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Preview, {}) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName26("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Loader, { size: 24 }) })
+        ] })
       ]
     }
   );

package/dist/index.mjs

@@ -154,7 +154,16 @@ var Action = ({
   children,
   label,
   onClick
-}) => /* @__PURE__ */ jsx("button", { className: getClassName("action"), onClick, title: label, children });
+}) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    className: getClassName("action"),
+    onClick,
+    title: label,
+    children
+  }
+);
 ActionBar.Action = Action;
 
 // components/AutoField/index.tsx
@@ -1349,6 +1358,7 @@ var ExternalInput = ({
           value && /* @__PURE__ */ jsx14(
             "button",
             {
+              type: "button",
               className: getClassName10("detachButton"),
               onClick: () => {
                 onChange(null);
@@ -2838,6 +2848,7 @@ var SidebarSection = ({
             /* @__PURE__ */ jsx26(
               "button",
               {
+                type: "button",
                 className: getClassName19("breadcrumbLabel"),
                 onClick: () => setUi({ itemSelector: breadcrumb.selector }),
                 children: breadcrumb.label
@@ -3727,6 +3738,7 @@ var ComponentList = ({
     title && /* @__PURE__ */ jsxs16(
       "button",
       {
+        type: "button",
         className: getClassName22("title"),
         onClick: () => setUi({
           componentList: __spreadProps(__spreadValues({}, state.ui.componentList), {
@@ -4277,6 +4289,7 @@ var LayerTree = ({
               /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs17(
                 "button",
                 {
+                  type: "button",
                   className: getClassNameLayer("clickable"),
                   onClick: () => {
                     if (isSelected) {
@@ -4772,7 +4785,7 @@ var ViewportControls = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_6zd4y_1", "PuckCanvas-controls": "_PuckCanvas-controls_6zd4y_16", "PuckCanvas-inner": "_PuckCanvas-inner_6zd4y_21", "PuckCanvas-root": "_PuckCanvas-root_6zd4y_32", "PuckCanvas--ready": "_PuckCanvas--ready_6zd4y_56" };
+var styles_module_default21 = { "PuckCanvas": "_PuckCanvas_esbg1_1", "PuckCanvas-controls": "_PuckCanvas-controls_esbg1_16", "PuckCanvas-inner": "_PuckCanvas-inner_esbg1_21", "PuckCanvas-root": "_PuckCanvas-root_esbg1_32", "PuckCanvas--ready": "_PuckCanvas--ready_esbg1_56", "PuckCanvas-loader": "_PuckCanvas-loader_esbg1_60", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_esbg1_70" };
 
 // lib/get-zoom-config.ts
 init_react_import();
@@ -4864,11 +4877,18 @@ var Canvas = () => {
       observer.disconnect();
     };
   }, []);
+  const [showLoader, setShowLoader] = useState19(false);
+  useEffect16(() => {
+    setTimeout(() => {
+      setShowLoader(true);
+    }, 500);
+  }, []);
   return /* @__PURE__ */ jsxs20(
     "div",
     {
       className: getClassName26({
-        ready: status === "READY" || !iframe.enabled
+        ready: status === "READY" || !iframe.enabled,
+        showLoader
       }),
       onClick: () => dispatch({
         type: "setUi",
@@ -4901,21 +4921,24 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ jsx37("div", { className: getClassName26("inner"), ref: frameRef, children: /* @__PURE__ */ jsx37(
-          "div",
-          {
-            className: getClassName26("root"),
-            style: {
-              width: iframe.enabled ? ui.viewports.current.width : "100%",
-              height: zoomConfig.rootHeight,
-              transform: iframe.enabled ? `scale(${zoomConfig.zoom})` : void 0,
-              transition: showTransition ? "width 150ms ease-out, height 150ms ease-out, transform 150ms ease-out" : "",
-              overflow: iframe.enabled ? void 0 : "auto"
-            },
-            suppressHydrationWarning: true,
-            children: /* @__PURE__ */ jsx37(CustomPreview, { children: /* @__PURE__ */ jsx37(Preview, {}) })
-          }
-        ) })
+        /* @__PURE__ */ jsxs20("div", { className: getClassName26("inner"), ref: frameRef, children: [
+          /* @__PURE__ */ jsx37(
+            "div",
+            {
+              className: getClassName26("root"),
+              style: {
+                width: iframe.enabled ? ui.viewports.current.width : "100%",
+                height: zoomConfig.rootHeight,
+                transform: iframe.enabled ? `scale(${zoomConfig.zoom})` : void 0,
+                transition: showTransition ? "width 150ms ease-out, height 150ms ease-out, transform 150ms ease-out" : "",
+                overflow: iframe.enabled ? void 0 : "auto"
+              },
+              suppressHydrationWarning: true,
+              children: /* @__PURE__ */ jsx37(CustomPreview, { children: /* @__PURE__ */ jsx37(Preview, {}) })
+            }
+          ),
+          /* @__PURE__ */ jsx37("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx37(Loader, { size: 24 }) })
+        ] })
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.16.0-canary.937bb92",
+  "version": "0.16.0-canary.94f16b2",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",