fix(app-page-builder): separate state observers for better performance (

#3695)
webiny · Nov 10, 2023 · fa1befb · fa1befb
1 parent 63fa1cb
commit fa1befb
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 18 deletions.
diff --git a/packages/api-page-builder-import-export/src/import/process/blocks/blocksHandler.ts b/packages/api-page-builder-import-export/src/import/process/blocks/blocksHandler.ts
@@ -97,7 +97,11 @@ export const blocksHandler = async (
         });
         prevStatusOfSubTask = subTask.status;
     } catch (e) {
-        log("[IMPORT_BLOCKS_PROCESS] Error => ", e.message);
+        console.error(
+            "[IMPORT_BLOCKS_PROCESS] Error => ",
+            e.message,
+            JSON.stringify(e.data, null, 2)
+        );
 
         if (subTask && subTask.id) {
             /**

diff --git a/packages/app-page-builder/src/admin/contexts/AdminPageBuilder/PageBlocks/BlocksRepository.ts b/packages/app-page-builder/src/admin/contexts/AdminPageBuilder/PageBlocks/BlocksRepository.ts
@@ -106,7 +106,7 @@ export class BlocksRepository {
         const decompressed = this.decompressPageBlock(pageBlock);
 
         runInAction(() => {
-            this.pageBlocks.push(decompressed);
+            this.pageBlocks = [...this.pageBlocks, decompressed];
         });
 
         this.createBlockPlugin(decompressed);

diff --git a/packages/app-page-builder/src/admin/contexts/AdminPageBuilder/PageBlocks/usePageBlocks.ts b/packages/app-page-builder/src/admin/contexts/AdminPageBuilder/PageBlocks/usePageBlocks.ts
@@ -20,17 +20,25 @@ export function usePageBlocks() {
 
     useEffect(() => {
         blocksRepository.listPageBlocks();
+    }, [blocksRepository]);
 
-        autorun(() => {
+    useEffect(() => {
+        return autorun(() => {
             const loading = blocksRepository.getLoading();
 
-            setVm({
-                pageBlocks: blocksRepository.getPageBlocks().map(pageBlock => {
-                    return structuredClone(pageBlock);
-                }),
+            setVm(vm => ({
+                ...vm,
                 loading: loading.isLoading,
                 loadingLabel: loading.loadingLabel
-            });
+            }));
+        });
+    }, [blocksRepository]);
+
+    useEffect(() => {
+        return autorun(() => {
+            const pageBlocks = blocksRepository.getPageBlocks();
+
+            setVm(vm => ({ ...vm, pageBlocks }));
         });
     }, [blocksRepository]);
 

diff --git a/packages/app-page-builder/src/admin/views/PageBlocks/PageBlocksDataList.tsx b/packages/app-page-builder/src/admin/views/PageBlocks/PageBlocksDataList.tsx
@@ -34,16 +34,16 @@ const List = styled("div")`
 `;
 
 const ListItem = styled.div`
-  position: relative;
-  border: 1px solid rgba(212, 212, 212, 0.5);
-  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
-  0px 1px 3px 0px rgb(0 0 0 / 12%);
-  min-height: 70px;
-  padding: 15px;
-  margin-bottom: 10px;
-  :last-of-type {
-    margin-bottom: 0;
-  }
+    position: relative;
+    border: 1px solid rgba(212, 212, 212, 0.5);
+    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
+        0px 1px 3px 0px rgb(0 0 0 / 12%);
+    min-height: 70px;
+    padding: 15px;
+    margin-bottom: 10px;
+    :last-of-type {
+        margin-bottom: 0;
+    }
 `;
 
 const ListItemText = styled("div")({