fix(core): improve performance (#6345)

packages/frontend/core/src/components/page-list/group-definitions.tsx

@@ -1,3 +1,4 @@
+import type { Tag } from '@affine/core/modules/tag';
 import { TagService } from '@affine/core/modules/tag';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { FavoritedIcon, FavoriteIcon } from '@blocksuite/icons';
@@ -28,7 +29,7 @@ const GroupLabel = ({
   id,
 }: {
   id: string;
-  label: string;
+  label: ReactNode;
   count: number;
   icon?: ReactNode;
 }) => (
@@ -115,30 +116,38 @@ export const useDateGroupDefinitions = <T extends ListItem>(
     [key, t]
   );
 };
+
+const GroupTagLabel = ({ tag, count }: { tag: Tag; count: number }) => {
+  const tagValue = useLiveData(tag.value$);
+  const tagColor = useLiveData(tag.color$);
+  return (
+    <GroupLabel
+      id={tag.id}
+      label={tagValue}
+      count={count}
+      icon={
+        <div
+          className={styles.tagIcon}
+          style={{
+            backgroundColor: tagColor,
+          }}
+        ></div>
+      }
+    ></GroupLabel>
+  );
+};
 export const useTagGroupDefinitions = (): ItemGroupDefinition<ListItem>[] => {
   const tagService = useService(TagService);
-  const tagMetas = useLiveData(tagService.tagMetas$);
+  const tags = useLiveData(tagService.tags$);
   return useMemo(() => {
-    return tagMetas.map(tag => ({
+    return tags.map(tag => ({
       id: tag.id,
-      label: count => (
-        <GroupLabel
-          id={tag.title}
-          label={tag.title}
-          count={count}
-          icon={
-            <div
-              className={styles.tagIcon}
-              style={{
-                backgroundColor: tag.color,
-              }}
-            ></div>
-          }
-        />
-      ),
+      label: count => {
+        return <GroupTagLabel tag={tag} count={count} />;
+      },
       match: item => (item as DocMeta).tags?.includes(tag.id),
     }));
-  }, [tagMetas]);
+  }, [tags]);
 };
 
 export const useFavoriteGroupDefinitions = <

packages/frontend/core/src/hooks/affine/use-doc-engine-status.tsx

@@ -4,8 +4,9 @@ import { useMemo } from 'react';
 export function useDocEngineStatus() {
   const workspace = useService(Workspace);
 
-  const engineState = useLiveData(workspace.engine.docEngineState$);
-
+  const engineState = useLiveData(
+    workspace.engine.docEngineState$.throttleTime(100)
+  );
   const progress =
     (engineState.total - engineState.syncing) / engineState.total;
 

packages/frontend/core/src/modules/multi-tab-sidebar/entities/tabs/journal.tsx

@@ -196,11 +196,9 @@ const JournalDailyCountBlock = ({ date }: JournalBlockProps) => {
     (field: 'createDate' | 'updatedDate') => {
       return sortPagesByDate(
         pageRecords.filter(pageRecord => {
-          if (pageRecord.meta$.value.trash) return false;
-          return (
-            pageRecord.meta$.value[field] &&
-            dayjs(pageRecord.meta$.value[field]).isSame(date, 'day')
-          );
+          const meta = pageRecord.meta$.value;
+          if (meta.trash) return false;
+          return meta[field] && dayjs(meta[field]).isSame(date, 'day');
         }),
         field
       );

packages/frontend/core/src/pages/workspace/index.tsx

@@ -73,7 +73,7 @@ export const Component = (): ReactElement => {
 
   //  avoid doing operation, before workspace is loaded
   const isRootDocReady =
-    useLiveData(workspace?.engine.rootDocState$)?.ready ?? false;
+    useLiveData(workspace?.engine.rootDocState$.map(v => v.ready)) ?? false;
 
   // if listLoading is false, we can show 404 page, otherwise we should show loading page.
   if (listLoading === false && meta === undefined) {