perf: use lazy load provider for IDB and SQLITE (#3351)

apps/core/src/components/blocksuite/block-suite-page-list/index.tsx

@@ -4,13 +4,15 @@ import { PageList, PageListTrashView } from '@affine/component/page-list';
 import type { Collection } from '@affine/env/filter';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { assertExists } from '@blocksuite/global/utils';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
-import type { PageMeta } from '@blocksuite/store';
+import { type PageMeta, type Workspace } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
-import { getPagePreviewText } from '@toeverything/hooks/use-block-suite-page-preview';
-import { useAtom } from 'jotai';
+import { useBlockSuitePagePreview } from '@toeverything/hooks/use-block-suite-page-preview';
+import { useBlockSuiteWorkspacePage } from '@toeverything/hooks/use-block-suite-workspace-page';
+import { useAtom, useAtomValue } from 'jotai';
 import type React from 'react';
-import { useMemo } from 'react';
+import { Suspense, useMemo } from 'react';
 
 import { allPageModeSelectAtom } from '../../../atoms';
 import { useBlockSuiteMetaHelper } from '../../../hooks/affine/use-block-suite-meta-helper';
@@ -39,6 +41,34 @@ const filter = {
   shared: (pageMeta: PageMeta) => pageMeta.isPublic && !pageMeta.trash,
 };
 
+const PagePreviewInner = ({
+  workspace,
+  pageId,
+}: {
+  workspace: Workspace;
+  pageId: string;
+}) => {
+  const page = useBlockSuiteWorkspacePage(workspace, pageId);
+  assertExists(page);
+  const previewAtom = useBlockSuitePagePreview(page);
+  const preview = useAtomValue(previewAtom);
+  return preview;
+};
+
+const PagePreview = ({
+  workspace,
+  pageId,
+}: {
+  workspace: Workspace;
+  pageId: string;
+}) => {
+  return (
+    <Suspense>
+      <PagePreviewInner workspace={workspace} pageId={pageId} />
+    </Suspense>
+  );
+};
+
 const PageListEmpty = (props: {
   createPage?: () => void;
   listType: BlockSuitePageListProps['listType'];
@@ -147,8 +177,6 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
 
   if (listType === 'trash') {
     const pageList: TrashListData[] = list.map(pageMeta => {
-      const page = blockSuiteWorkspace.getPage(pageMeta.id);
-      const preview = page ? getPagePreviewText(page) : undefined;
       return {
         icon: isPreferredEdgeless(pageMeta.id) ? (
           <EdgelessIcon />
@@ -157,7 +185,9 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
         ),
         pageId: pageMeta.id,
         title: pageMeta.title,
-        preview,
+        preview: (
+          <PagePreview workspace={blockSuiteWorkspace} pageId={pageMeta.id} />
+        ),
         createDate: new Date(pageMeta.createDate),
         trashDate: pageMeta.trashDate
           ? new Date(pageMeta.trashDate)
@@ -186,12 +216,13 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
 
   const pageList: ListData[] = list.map(pageMeta => {
     const page = blockSuiteWorkspace.getPage(pageMeta.id);
-    const preview = page ? getPagePreviewText(page) : undefined;
     return {
       icon: isPreferredEdgeless(pageMeta.id) ? <EdgelessIcon /> : <PageIcon />,
       pageId: pageMeta.id,
       title: pageMeta.title,
-      preview,
+      preview: (
+        <PagePreview workspace={blockSuiteWorkspace} pageId={pageMeta.id} />
+      ),
       tags:
         page?.meta.tags?.map(id => tagOptionMap[id]).filter(v => v != null) ??
         [],

apps/core/src/components/blocksuite/block-suite-page-list/utils.tsx

@@ -1,3 +1,4 @@
+import { initEmptyPage } from '@affine/env/blocksuite';
 import { useBlockSuiteWorkspaceHelper } from '@toeverything/hooks/use-block-suite-workspace-helper';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { useCallback } from 'react';
@@ -15,15 +16,23 @@ export const usePageHelper = (blockSuiteWorkspace: BlockSuiteWorkspace) => {
     [pageSettings]
   );
   const setPageMode = useSetAtom(setPageModeAtom);
-  const createPageAndOpen = useCallback(() => {
-    const page = createPage();
-    return openPage(blockSuiteWorkspace.id, page.id);
-  }, [blockSuiteWorkspace.id, createPage, openPage]);
-  const createEdgelessAndOpen = useCallback(() => {
-    const page = createPage();
-    setPageMode(page.id, 'edgeless');
-    return openPage(blockSuiteWorkspace.id, page.id);
-  }, [blockSuiteWorkspace.id, createPage, openPage, setPageMode]);
+  const createPageAndOpen = useCallback(
+    (id?: string, mode?: 'page' | 'edgeless') => {
+      const page = createPage(id);
+      initEmptyPage(page); // we don't need to wait it to be loaded right?
+      if (mode) {
+        setPageMode(page.id, mode);
+      }
+      openPage(blockSuiteWorkspace.id, page.id);
+    },
+    [blockSuiteWorkspace.id, createPage, openPage, setPageMode]
+  );
+  const createEdgelessAndOpen = useCallback(
+    (id?: string) => {
+      return createPageAndOpen(id, 'edgeless');
+    },
+    [createPageAndOpen]
+  );
   const importFileAndOpen = useCallback(async () => {
     const { showImportModal } = await import('@blocksuite/blocks');
     showImportModal({ workspace: blockSuiteWorkspace });

apps/core/src/layouts/workspace-layout.tsx

@@ -27,7 +27,6 @@ import {
   useSensor,
   useSensors,
 } from '@dnd-kit/core';
-import { useBlockSuiteWorkspaceHelper } from '@toeverything/hooks/use-block-suite-workspace-helper';
 import { usePassiveWorkspaceEffect } from '@toeverything/plugin-infra/__internal__/react';
 import { currentWorkspaceIdAtom } from '@toeverything/plugin-infra/manager';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
@@ -43,6 +42,7 @@ import {
 } from '../atoms';
 import { useAppSetting } from '../atoms/settings';
 import { AppContainer } from '../components/affine/app-container';
+import { usePageHelper } from '../components/blocksuite/block-suite-page-list/utils';
 import type { IslandItemNames } from '../components/pure/help-island';
 import { HelpIsland } from '../components/pure/help-island';
 import { processCollectionsDrag } from '../components/pure/workspace-slider-bar/collections';
@@ -158,13 +158,16 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
   usePassiveWorkspaceEffect(currentWorkspace.blockSuiteWorkspace);
 
   const [, setOpenWorkspacesModal] = useAtom(openWorkspacesModalAtom);
-  const helper = useBlockSuiteWorkspaceHelper(
-    currentWorkspace.blockSuiteWorkspace
-  );
+  const helper = usePageHelper(currentWorkspace.blockSuiteWorkspace);
 
   const handleCreatePage = useCallback(() => {
-    return helper.createPage(nanoid());
-  }, [helper]);
+    const id = nanoid();
+    helper.createPage(id);
+    const page = currentWorkspace.blockSuiteWorkspace.getPage(id);
+    assertExists(page);
+    return page;
+  }, [currentWorkspace.blockSuiteWorkspace, helper]);
+
   const handleOpenWorkspaceListModal = useCallback(() => {
     setOpenWorkspacesModal(true);
   }, [setOpenWorkspacesModal]);