update metadata loading ui (#7080)

Co-authored-by: zhouwenxuan <aries@Mac.local>

frontend/src/metadata/constants/index.js

@@ -105,6 +105,10 @@ export const SUPPORT_BATCH_DOWNLOAD_TYPES = [];
 
 export const PER_LOAD_NUMBER = 1000;
 
+export const DEFAULT_RETRY_TIMES = 4;
+
+export const DEFAULT_RETRY_INTERVAL = 1000;
+
 // dtable-db limit loads up to 10,000 rows at a time
 export const MAX_LOAD_NUMBER = 10000;
 

frontend/src/metadata/hooks/metadata-view.js

@@ -7,7 +7,6 @@ import { EVENT_BUS_TYPE, PER_LOAD_NUMBER } from '../constants';
 import { Utils } from '../../utils/utils';
 import { useMetadata } from './metadata';
 import { useCollaborators } from './collaborators';
-import { gettext } from '../../utils/constants';
 
 const MetadataViewContext = React.createContext(null);
 
@@ -21,7 +20,7 @@ export const MetadataViewProvider = ({
   const [metadata, setMetadata] = useState({ rows: [], columns: [], view: {} });
   const storeRef = useRef(null);
   const { collaborators } = useCollaborators();
-  const { showFirstView, setShowFirstView } = useMetadata();
+  const { isEmptyRepo, showFirstView, setShowFirstView } = useMetadata();
 
   const tableChanged = useCallback(() => {
     setMetadata(storeRef.current.data);
@@ -84,10 +83,7 @@ export const MetadataViewProvider = ({
     storeRef.current = new Store({ context: window.sfMetadataContext, repoId: repoID, viewId: viewID, collaborators });
     window.sfMetadataStore = storeRef.current;
     storeRef.current.initStartIndex();
-    storeRef.current.load(PER_LOAD_NUMBER).then(() => {
-      if (showFirstView && storeRef.current.data.rows.length === 0) {
-        toaster.success(gettext('The files\' metadata is being created. This may take a minute or so. Please refresh the page later.'));
-      }
+    storeRef.current.load(PER_LOAD_NUMBER, isEmptyRepo).then(() => {
       setMetadata(storeRef.current.data);
       setShowFirstView(false);
       setLoading(false);
@@ -134,6 +130,7 @@ export const MetadataViewProvider = ({
     <MetadataViewContext.Provider
       value={{
         isLoading,
+        showFirstView,
         metadata,
         store: storeRef.current,
         isDirentDetailShow: params.isDirentDetailShow,

frontend/src/metadata/hooks/metadata.js

@@ -15,6 +15,7 @@ export const MetadataProvider = ({ repoID, currentRepoInfo, hideMetadataView, se
     return window.app.pageOptions.enableMetadataManagement;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [window.app.pageOptions.enableMetadataManagement, currentRepoInfo]);
+  const isEmptyRepo = useMemo(() => currentRepoInfo.file_count === 0, [currentRepoInfo]);
 
   const [enableMetadata, setEnableExtendedProperties] = useState(false);
   const [enableFaceRecognition, setEnableFaceRecognition] = useState(false);
@@ -215,6 +216,7 @@ export const MetadataProvider = ({ repoID, currentRepoInfo, hideMetadataView, se
 
   return (
     <MetadataContext.Provider value={{
+      isEmptyRepo,
       enableMetadata,
       updateEnableMetadata,
       enableFaceRecognition,

frontend/src/metadata/metadata-view/index.css

@@ -11,3 +11,18 @@
   max-height: 24px;
   height: unset;
 }
+
+.sf-metadata-loading-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.sf-metadata-loading-tip {
+  margin-top: 8px;
+  font-size: 14px;
+  color: #666;
+}

frontend/src/metadata/metadata-view/view.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { CenteredLoading } from '@seafile/sf-metadata-ui-component';
+import { CenteredLoading, Loading } from '@seafile/sf-metadata-ui-component';
 import Table from '../views/table';
 import Gallery from '../views/gallery';
 import FaceRecognition from '../views/face-recognition';
@@ -10,7 +10,7 @@ import { gettext } from '../../utils/constants';
 import { VIEW_TYPE } from '../constants';
 
 const View = () => {
-  const { isLoading, metadata, errorMsg } = useMetadataView();
+  const { isLoading, showFirstView, metadata, errorMsg } = useMetadataView();
 
   const renderView = useCallback((metadata) => {
     if (!metadata) return null;
@@ -36,7 +36,14 @@ const View = () => {
     }
   }, []);
 
-  if (isLoading) return (<CenteredLoading />);
+  if (isLoading) {
+    return showFirstView ? (
+      <div className="sf-metadata-loading-wrapper">
+        <Loading />
+        <span className="sf-metadata-loading-tip">{gettext('Extended properties are being built.')}</span>
+      </div>
+    ) : <CenteredLoading />;
+  }
 
   return (
     <div className="sf-metadata-wrapper">

frontend/src/metadata/store/index.js

@@ -5,7 +5,7 @@ import {
   Operation, LOCAL_APPLY_OPERATION_TYPE, NEED_APPLY_AFTER_SERVER_OPERATION, OPERATION_TYPE, UNDO_OPERATION_TYPE,
   VIEW_OPERATION, COLUMN_OPERATION
 } from './operations';
-import { EVENT_BUS_TYPE, PER_LOAD_NUMBER, PRIVATE_COLUMN_KEY } from '../constants';
+import { EVENT_BUS_TYPE, PER_LOAD_NUMBER, PRIVATE_COLUMN_KEY, DEFAULT_RETRY_TIMES, DEFAULT_RETRY_INTERVAL } from '../constants';
 import DataProcessor from './data-processor';
 import ServerOperator from './server-operator';
 import LocalOperator from './local-operator';
@@ -46,9 +46,13 @@ class Store {
     this.startIndex = 0;
   };
 
-  async loadMetadata(view, limit) {
+  async loadMetadata(view, limit, retries = DEFAULT_RETRY_TIMES, delay = DEFAULT_RETRY_INTERVAL) {
     const res = await this.context.getMetadata({ view_id: this.viewId, start: this.startIndex, limit });
     const rows = res?.data?.results || [];
+    if (rows.length === 0 && retries > 0) {
+      await new Promise(resolve => setTimeout(resolve, delay));
+      return this.loadMetadata(view, limit, retries - 1, delay);
+    }
     const columns = normalizeColumns(res?.data?.metadata);
     let data = new Metadata({ rows, columns, view });
     data.view.rows = data.row_ids;
@@ -59,10 +63,11 @@ class Store {
     DataProcessor.run(this.data, { collaborators: this.collaborators });
   }
 
-  async load(limit = PER_LOAD_NUMBER) {
+  async load(limit = PER_LOAD_NUMBER, isEmptyRepo = false) {
     const viewRes = await this.context.getView(this.viewId);
     const view = viewRes?.data?.view || {};
-    await this.loadMetadata(view, limit);
+    const retries = isEmptyRepo ? 0 : DEFAULT_RETRY_TIMES;
+    await this.loadMetadata(view, limit, retries);
   }
 
   async reload(limit = PER_LOAD_NUMBER) {