feat(core): add loading to quick search modal (#5785)

close AFF-285

add `useSyncEngineStatus` hooks
add loading style

<img width="977" alt="test1" src="https://github.com/toeverything/AFFiNE/assets/102217452/e8bf6714-e42b-4adf-a279-341ef5f5cfc0">

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

@@ -0,0 +1,35 @@
+import { syncEngineStatusAtom } from '@affine/core/atoms/sync-engine-status';
+import { useAtom } from 'jotai';
+import { mean } from 'lodash-es';
+import { useMemo } from 'react';
+
+export function useSyncEngineStatus() {
+  const [syncEngineStatus, setSyncEngineStatus] = useAtom(syncEngineStatusAtom);
+
+  const progress = useMemo(() => {
+    if (!syncEngineStatus?.remotes || syncEngineStatus?.remotes.length === 0) {
+      return null;
+    }
+    return mean(
+      syncEngineStatus.remotes.map(peer => {
+        if (!peer) {
+          return 0;
+        }
+        const totalTask =
+          peer.totalDocs + peer.pendingPullUpdates + peer.pendingPushUpdates;
+        const doneTask = peer.loadedDocs;
+
+        return doneTask / totalTask;
+      })
+    );
+  }, [syncEngineStatus?.remotes]);
+
+  return useMemo(
+    () => ({
+      syncEngineStatus,
+      setSyncEngineStatus,
+      progress,
+    }),
+    [progress, setSyncEngineStatus, syncEngineStatus]
+  );
+}