chore: add loading states for root resolveData

measuredco · Oct 31, 2023 · c61cfa4 · c61cfa4
1 parent 7593584
commit c61cfa4
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
@@ -604,8 +604,9 @@ export function Puck({
                           showBreadcrumbs
                           title={selectedItem ? selectedItem.type : "Page"}
                           isLoading={
-                            selectedItem &&
-                            componentState[selectedItem?.props.id]?.loading
+                            selectedItem
+                              ? componentState[selectedItem?.props.id]?.loading
+                              : componentState["puck-root"]?.loading
                           }
                         >
                           {Object.keys(fields).map((fieldName) => {

diff --git a/packages/core/lib/use-resolved-data.ts b/packages/core/lib/use-resolved-data.ts
@@ -38,8 +38,18 @@ export const useResolvedData = (
         }));
       }
     ).then(async (dynamicContent) => {
+      setComponentState((prev) => ({
+        ...prev,
+        "puck-root": { ...prev["puck-root"], loading: true },
+      }));
+
       const dynamicRoot = await resolveRootData(data, config);
 
+      setComponentState((prev) => ({
+        ...prev,
+        "puck-root": { ...prev["puck-root"], loading: false },
+      }));
+
       const newDynamicProps = dynamicContent.reduce<Record<string, any>>(
         (acc, item) => {
           return { ...acc, [item.props.id]: item };