diff --git a/frontend/src/components/dirent-detail/embedded-file-details/index.js b/frontend/src/components/dirent-detail/embedded-file-details/index.js
index 9ad2dfd549..d0fbf4b598 100644
--- a/frontend/src/components/dirent-detail/embedded-file-details/index.js
+++ b/frontend/src/components/dirent-detail/embedded-file-details/index.js
@@ -10,6 +10,7 @@ import { MetadataContext } from '../../../metadata';
import { MetadataDetailsProvider } from '../../../metadata/hooks';
import AIIcon from '../../../metadata/components/metadata-details/ai-icon';
import SettingsIcon from '../../../metadata/components/metadata-details/settings-icon';
+import Loading from '../../loading';
import './index.css';
@@ -18,6 +19,7 @@ const { enableSeafileAI } = window.app.config;
const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className, component = {} }) => {
const { headerComponent } = component;
const [direntDetail, setDirentDetail] = useState('');
+ const [isFetching, setIsFetching] = useState(true);
const isView = useMemo(() => {
const urlParams = new URLSearchParams(window.location.search);
@@ -28,6 +30,7 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
const fullPath = path.split('/').pop() === dirent?.name ? path : Utils.joinPath(path, dirent?.name || '');
seafileAPI.getFileInfo(repoID, fullPath).then(res => {
setDirentDetail(res.data);
+ setIsFetching(false);
}).catch(error => {
const errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
@@ -79,11 +82,14 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
)}
- {dirent && direntDetail && (
-
-
-
- )}
+ {isFetching ?
+
+ :
+ dirent && direntDetail && (
+
+
+
+ )}
diff --git a/frontend/src/hooks/metadata-status.js b/frontend/src/hooks/metadata-status.js
index 85fcaed513..8144e4c5c9 100644
--- a/frontend/src/hooks/metadata-status.js
+++ b/frontend/src/hooks/metadata-status.js
@@ -3,6 +3,7 @@ import metadataAPI from '../metadata/api';
import { Utils } from '../utils/utils';
import toaster from '../components/toast';
import { MetadataAIOperationsProvider } from './metadata-ai-operation';
+import Loading from '../components/loading';
// This hook provides content related to seahub interaction, such as whether to enable extended attributes
const MetadataStatusContext = React.createContext(null);
@@ -123,6 +124,15 @@ export const MetadataStatusProvider = ({ repoID, repoInfo, hideMetadataView, sta
});
}, [repoID, detailsSettings]);
+ if (isLoading) {
+ return (
+
+
+
+ );
+
+ }
+
return (
{
const onDeleteFilter = useCallback((event) => {
event.nativeEvent.stopImmediatePropagation();
onChangeAPI([]);
+ // eslint-disable-next-line
oldValue = [];
}, [value, onChangeAPI, oldValue]);