fix(infra): large page list performance (#6319)

toeverything · Mar 26, 2024 · b6bba52 · b6bba52
1 parent 8ee9f6e
commit b6bba52
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/packages/common/infra/src/page/record-list.ts b/packages/common/infra/src/page/record-list.ts
@@ -11,6 +11,8 @@ export class PageRecordList {
     private readonly localState: WorkspaceLocalState
   ) {}
 
+  private readonly recordsPool = new Map<string, PageRecord>();
+
   public readonly records$ = LiveData.from<PageRecord[]>(
     new Observable<string[]>(subscriber => {
       const emit = () => {
@@ -29,7 +31,15 @@ export class PageRecordList {
     }).pipe(
       distinctUntilChanged((p, c) => isEqual(p, c)),
       map(ids =>
-        ids.map(id => new PageRecord(id, this.workspace, this.localState))
+        ids.map(id => {
+          const exists = this.recordsPool.get(id);
+          if (exists) {
+            return exists;
+          }
+          const record = new PageRecord(id, this.workspace, this.localState);
+          this.recordsPool.set(id, record);
+          return record;
+        })
       )
     ),
     []

diff --git a/packages/common/infra/src/page/record.ts b/packages/common/infra/src/page/record.ts
@@ -1,5 +1,6 @@
 import type { DocMeta } from '@blocksuite/store';
-import { Observable } from 'rxjs';
+import { isEqual } from 'lodash-es';
+import { distinctUntilChanged, Observable } from 'rxjs';
 
 import { LiveData } from '../livedata';
 import type { Workspace, WorkspaceLocalState } from '../workspace';
@@ -14,7 +15,7 @@ export class PageRecord {
   ) {}
 
   meta$ = LiveData.from<DocMeta>(
-    new Observable(subscriber => {
+    new Observable<DocMeta>(subscriber => {
       const emit = () => {
         const meta = this.workspace.docCollection.meta.docMetas.find(
           page => page.id === this.id
@@ -32,7 +33,7 @@ export class PageRecord {
       return () => {
         dispose();
       };
-    }),
+    }).pipe(distinctUntilChanged((p, c) => isEqual(p, c))),
     {
       id: this.id,
       title: '',