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

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;