feat(core): loading ui for favorite and organize (#7700)

packages/frontend/core/src/modules/explorer/views/sections/favorites/empty.tsx

@@ -1,6 +1,7 @@
 import {
   type DropTargetDropEvent,
   type DropTargetOptions,
+  Skeleton,
   useDropTarget,
 } from '@affine/component';
 import type { AffineDNDData } from '@affine/core/types/dnd';
@@ -13,11 +14,13 @@ import { DropEffect, type ExplorerTreeNodeDropEffect } from '../../tree';
 export const RootEmpty = ({
   onDrop,
   canDrop,
+  isLoading,
   dropEffect,
 }: {
   onDrop?: (data: DropTargetDropEvent<AffineDNDData>) => void;
   canDrop?: DropTargetOptions<AffineDNDData>['canDrop'];
   dropEffect?: ExplorerTreeNodeDropEffect;
+  isLoading?: boolean;
 }) => {
   const t = useI18n();
 
@@ -33,6 +36,10 @@ export const RootEmpty = ({
       [onDrop, canDrop]
     );
 
+  if (isLoading) {
+    return <Skeleton />;
+  }
+
   return (
     <ExplorerEmptySection
       ref={dropTargetRef}

packages/frontend/core/src/modules/explorer/views/sections/favorites/index.tsx

@@ -44,6 +44,8 @@ export const ExplorerFavorites = () => {
 
   const favorites = useLiveData(favoriteService.favoriteList.sortedList$);
 
+  const isLoading = useLiveData(favoriteService.favoriteList.isLoading$);
+
   const t = useI18n();
 
   const handleDrop = useCallback(
@@ -262,6 +264,7 @@ export const ExplorerFavorites = () => {
             onDrop={handleDrop}
             canDrop={handleCanDrop}
             dropEffect={handleDropEffect}
+            isLoading={isLoading}
           />
         }
       >

packages/frontend/core/src/modules/explorer/views/sections/organize/empty.tsx

@@ -1,3 +1,4 @@
+import { Skeleton } from '@affine/component';
 import { useI18n } from '@affine/i18n';
 import { FolderIcon } from '@blocksuite/icons/rc';
 
@@ -5,11 +6,17 @@ import { ExplorerEmptySection } from '../../layouts/empty-section';
 
 export const RootEmpty = ({
   onClickCreate,
+  isLoading,
 }: {
   onClickCreate?: () => void;
+  isLoading?: boolean;
 }) => {
   const t = useI18n();
 
+  if (isLoading) {
+    return <Skeleton />;
+  }
+
   return (
     <ExplorerEmptySection
       icon={FolderIcon}

packages/frontend/core/src/modules/explorer/views/sections/organize/index.tsx

@@ -39,6 +39,7 @@ export const ExplorerOrganize = () => {
   const rootFolder = organizeService.folderTree.rootFolder;
 
   const folders = useLiveData(rootFolder.sortedChildren$);
+  const isLoading = useLiveData(organizeService.folderTree.isLoading$);
 
   const handleCreateFolder = useCallback(() => {
     const newFolderId = rootFolder.createFolder(
@@ -128,7 +129,9 @@ export const ExplorerOrganize = () => {
       }
     >
       <ExplorerTreeRoot
-        placeholder={<RootEmpty onClickCreate={handleCreateFolder} />}
+        placeholder={
+          <RootEmpty onClickCreate={handleCreateFolder} isLoading={isLoading} />
+        }
       >
         {folders.map(child => (
           <ExplorerFolderNode

packages/frontend/core/src/modules/favorite/entities/favorite-list.ts

@@ -9,6 +9,7 @@ export class FavoriteList extends Entity {
   sortedList$ = this.list$.map(v =>
     v.sort((a, b) => (a.index > b.index ? 1 : -1))
   );
+  isLoading$ = this.store.watchIsLoading();
 
   constructor(private readonly store: FavoriteStore) {
     super();

packages/frontend/core/src/modules/favorite/stores/favorite.ts

@@ -37,6 +37,12 @@ export class FavoriteStore extends Store {
     });
   }
 
+  watchIsLoading() {
+    return this.userdataDB$
+      .map(db => LiveData.from(db.favorite.isLoading$, false))
+      .flat();
+  }
+
   watchFavorites() {
     return this.userdataDB$
       .map(db => LiveData.from(db.favorite.find$(), []))

packages/frontend/core/src/modules/organize/entities/folder-tree.ts

@@ -13,6 +13,8 @@ export class FolderTree extends Entity {
     id: null,
   });
 
+  isLoading$ = this.folderStore.watchIsLoading();
+
   // get folder by id
   folderNode$(id: string) {
     return LiveData.from(

packages/frontend/core/src/modules/organize/stores/folder.ts

@@ -16,6 +16,10 @@ export class FolderStore extends Store {
     });
   }
 
+  watchIsLoading() {
+    return this.dbService.db.folders.isLoading$;
+  }
+
   isAncestor(childId: string, ancestorId: string): boolean {
     if (childId === ancestorId) {
       return false;