fix(editor): throttle render linked doc card when blockUpdated

toeverything · Dec 27, 2024 · 7e3ff15 · 7e3ff15
1 parent 9b3a2fc
commit 7e3ff15
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 31 deletions.
diff --git a/blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts b/blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts
@@ -23,7 +23,7 @@ import {
   matchFlavours,
   referenceToNode,
 } from '@blocksuite/affine-shared/utils';
-import { Bound } from '@blocksuite/global/utils';
+import { Bound, throttle } from '@blocksuite/global/utils';
 import { DocCollection } from '@blocksuite/store';
 import { computed } from '@preact/signals-core';
 import { html, nothing } from 'lit';
@@ -301,24 +301,28 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
           });
         })
       );
+      // Should throttle the blockUpdated event to avoid too many re-renders
+      // Because the blockUpdated event is triggered too frequently at some cases
       this.disposables.add(
-        linkedDoc.slots.blockUpdated.on(payload => {
-          if (
-            payload.type === 'update' &&
-            ['', 'caption', 'xywh'].includes(payload.props.key)
-          ) {
-            return;
-          }
-
-          if (payload.type === 'add' && payload.init) {
-            return;
-          }
-
-          this._load().catch(e => {
-            console.error(e);
-            this.isError = true;
-          });
-        })
+        linkedDoc.slots.blockUpdated.on(
+          throttle(payload => {
+            if (
+              payload.type === 'update' &&
+              ['', 'caption', 'xywh'].includes(payload.props.key)
+            ) {
+              return;
+            }
+
+            if (payload.type === 'add' && payload.init) {
+              return;
+            }
+
+            this._load().catch(e => {
+              console.error(e);
+              this.isError = true;
+            });
+          }, 60)
+        )
       );
 
       this._setDocUpdatedAt();

diff --git a/blocksuite/affine/block-embed/src/embed-synced-doc-block/components/embed-synced-doc-card.ts b/blocksuite/affine/block-embed/src/embed-synced-doc-block/components/embed-synced-doc-card.ts
@@ -1,6 +1,6 @@
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { isGfxBlockComponent, ShadowlessElement } from '@blocksuite/block-std';
-import { WithDisposable } from '@blocksuite/global/utils';
+import { throttle, WithDisposable } from '@blocksuite/global/utils';
 import { html, nothing } from 'lit';
 import { property, queryAsync } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -101,19 +101,23 @@ export class EmbedSyncedDocCard extends WithDisposable(ShadowlessElement) {
           renderLinkedDocInCard(this);
         })
       );
+      // Should throttle the blockUpdated event to avoid too many re-renders
+      // Because the blockUpdated event is triggered too frequently at some cases
       this.disposables.add(
-        syncedDoc.slots.blockUpdated.on(payload => {
-          if (this._dragging) {
-            return;
-          }
-          if (
-            payload.type === 'update' &&
-            ['', 'caption', 'xywh'].includes(payload.props.key)
-          ) {
-            return;
-          }
-          renderLinkedDocInCard(this);
-        })
+        syncedDoc.slots.blockUpdated.on(
+          throttle(payload => {
+            if (this._dragging) {
+              return;
+            }
+            if (
+              payload.type === 'update' &&
+              ['', 'caption', 'xywh'].includes(payload.props.key)
+            ) {
+              return;
+            }
+            renderLinkedDocInCard(this);
+          }, 60)
+        )
       );
     }
   }