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

#3695)
webiny · Nov 13, 2023 · 3ee2313 · 3ee2313
1 parent 39d2157
commit 3ee2313
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 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]);