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

packages/frontend/component/src/components/global-loading/index.css.ts

@@ -0,0 +1,29 @@
+import { style } from '@vanilla-extract/css';
+
+export const globalLoadingWrapperStyle = style({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: '100%',
+  zIndex: 5,
+  backgroundColor: 'var(--affine-background-modal-color)',
+  opacity: 0,
+  transition: 'opacity .3s',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'var(--affine-processing-color)',
+  '@media': {
+    print: {
+      display: 'none',
+      zIndex: -1,
+    },
+  },
+  selectors: {
+    '&[data-loading="true"]': {
+      right: 0,
+      opacity: 1,
+    },
+  },
+});

packages/frontend/component/src/components/global-loading/index.jotai.ts

@@ -0,0 +1,35 @@
+import { atom } from 'jotai';
+import { nanoid } from 'nanoid';
+
+export type GlobalLoadingEvent = {
+  key?: string;
+};
+
+const globalLoadingEventsBaseAtom = atom<GlobalLoadingEvent[]>([]);
+
+export const globalLoadingEventsAtom = atom<GlobalLoadingEvent[]>(get =>
+  get(globalLoadingEventsBaseAtom)
+);
+
+export const resolveGlobalLoadingEventAtom = atom(
+  null,
+  (_, set, key: string) => {
+    set(globalLoadingEventsBaseAtom, globalLoadingEvent =>
+      globalLoadingEvent.filter(notification => notification.key !== key)
+    );
+  }
+);
+
+export const pushGlobalLoadingEventAtom = atom<
+  null,
+  [GlobalLoadingEvent],
+  void
+>(null, (_, set, newGlobalLoadingEvent) => {
+  newGlobalLoadingEvent.key = newGlobalLoadingEvent.key || nanoid();
+
+  set(globalLoadingEventsBaseAtom, globalLoadingEvents => [
+    // push to the top
+    { ...newGlobalLoadingEvent },
+    ...globalLoadingEvents,
+  ]);
+});

packages/frontend/component/src/components/global-loading/index.tsx

@@ -0,0 +1,34 @@
+import { useAtomValue } from 'jotai';
+import { type ReactNode, useEffect, useState } from 'react';
+
+import { Loading } from '../../ui/loading';
+import * as styles from './index.css';
+import { globalLoadingEventsAtom } from './index.jotai';
+
+export {
+  type GlobalLoadingEvent,
+  pushGlobalLoadingEventAtom,
+  resolveGlobalLoadingEventAtom,
+} from './index.jotai';
+
+export function GlobalLoading(): ReactNode {
+  const globalLoadingEvents = useAtomValue(globalLoadingEventsAtom);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (globalLoadingEvents.length) {
+      setLoading(true);
+    } else {
+      setLoading(false);
+    }
+  }, [globalLoadingEvents]);
+
+  if (!globalLoadingEvents.length) {
+    return null;
+  }
+  return (
+    <div className={styles.globalLoadingWrapperStyle} data-loading={loading}>
+      <Loading size={20} />
+    </div>
+  );
+}