feat(core): add global loading state (#4840)

packages/frontend/core/src/app.tsx

@@ -3,6 +3,7 @@ import '@affine/component/theme/theme.css';
 import '@toeverything/components/style.css';
 
 import { AffineContext } from '@affine/component/context';
+import { GlobalLoading } from '@affine/component/global-loading';
 import { NotificationCenter } from '@affine/component/notification-center';
 import { WorkspaceFallback } from '@affine/component/workspace';
 import { CacheProvider } from '@emotion/react';
@@ -62,6 +63,7 @@ export const App = memo(function App() {
       <AffineContext store={getCurrentStore()}>
         <CloudSessionProvider>
           <DebugProvider>
+            <GlobalLoading />
             {runtimeConfig.enableNotificationCenter && <NotificationCenter />}
             <RouterProvider
               fallbackElement={<WorkspaceFallback key="RouterFallback" />}

packages/frontend/core/src/hooks/affine/use-export-page.ts

@@ -1,9 +1,14 @@
+import {
+  pushGlobalLoadingEventAtom,
+  resolveGlobalLoadingEventAtom,
+} from '@affine/component/global-loading';
 import { pushNotificationAtom } from '@affine/component/notification-center';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { PageBlockModel } from '@blocksuite/blocks';
 import { ContentParser } from '@blocksuite/blocks/content-parser';
 import type { Page } from '@blocksuite/store';
 import { useSetAtom } from 'jotai';
+import { nanoid } from 'nanoid';
 import { useCallback } from 'react';
 
 type ExportType = 'pdf' | 'html' | 'png' | 'markdown';
@@ -49,10 +54,16 @@ async function exportHandler({ page, type }: ExportHandlerOptions) {
 
 export const useExportPage = (page: Page) => {
   const pushNotification = useSetAtom(pushNotificationAtom);
+  const pushGlobalLoadingEvent = useSetAtom(pushGlobalLoadingEventAtom);
+  const resolveGlobalLoadingEvent = useSetAtom(resolveGlobalLoadingEventAtom);
   const t = useAFFiNEI18N();
 
   const onClickHandler = useCallback(
     async (type: ExportType) => {
+      const globalLoadingID = nanoid();
+      pushGlobalLoadingEvent({
+        key: globalLoadingID,
+      });
       try {
         await exportHandler({
           page,
@@ -70,9 +81,17 @@ export const useExportPage = (page: Page) => {
           message: t['com.affine.export.error.message'](),
           type: 'error',
         });
+      } finally {
+        resolveGlobalLoadingEvent(globalLoadingID);
       }
     },
-    [page, pushNotification, t]
+    [
+      page,
+      pushGlobalLoadingEvent,
+      pushNotification,
+      resolveGlobalLoadingEvent,
+      t,
+    ]
   );
 
   return onClickHandler;