Web:Client: modify loading system
This commit is contained in:
parent
c12d8fb8d7
commit
e6d6efda5b
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { useLocation, Navigate, Route, Outlet } from "react-router-dom";
|
||||
import { useLocation, Outlet } from "react-router-dom";
|
||||
import { withTranslation } from "react-i18next";
|
||||
|
||||
import Article from "@docspace/common/components/Article";
|
||||
@ -55,7 +55,7 @@ const ClientContent = (props) => {
|
||||
isFrame,
|
||||
withMainButton,
|
||||
t,
|
||||
setFirstLoad,
|
||||
|
||||
isLoading,
|
||||
} = props;
|
||||
|
||||
@ -114,10 +114,6 @@ const ClientContent = (props) => {
|
||||
isDesktopInit,
|
||||
]);
|
||||
|
||||
React.useEffect(() => {
|
||||
setFirstLoad(false);
|
||||
}, [setFirstLoad]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isLoading) {
|
||||
showLoader();
|
||||
@ -144,45 +140,47 @@ const ClientContent = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
const Client = inject(({ auth, filesStore, peopleStore }) => {
|
||||
const {
|
||||
frameConfig,
|
||||
isFrame,
|
||||
isDesktopClient,
|
||||
encryptionKeys,
|
||||
setEncryptionKeys,
|
||||
isEncryptionSupport,
|
||||
} = auth.settingsStore;
|
||||
const Client = inject(
|
||||
({ auth, clientLoadingStore, filesStore, peopleStore }) => {
|
||||
const {
|
||||
frameConfig,
|
||||
isFrame,
|
||||
isDesktopClient,
|
||||
encryptionKeys,
|
||||
setEncryptionKeys,
|
||||
isEncryptionSupport,
|
||||
} = auth.settingsStore;
|
||||
|
||||
if (!auth.userStore.user) return;
|
||||
if (!auth.userStore.user) return;
|
||||
|
||||
const { isVisitor } = auth.userStore.user;
|
||||
const { isVisitor } = auth.userStore.user;
|
||||
|
||||
const { setFirstLoad, isLoading } = filesStore;
|
||||
const { isLoading } = clientLoadingStore;
|
||||
|
||||
const withMainButton = !isVisitor;
|
||||
const withMainButton = !isVisitor;
|
||||
|
||||
return {
|
||||
isDesktop: isDesktopClient,
|
||||
isFrame,
|
||||
showMenu: frameConfig?.showMenu,
|
||||
user: auth.userStore.user,
|
||||
isAuthenticated: auth.isAuthenticated,
|
||||
encryptionKeys: encryptionKeys,
|
||||
isEncryption: isEncryptionSupport,
|
||||
isLoaded: auth.isLoaded && filesStore.isLoaded,
|
||||
setIsLoaded: filesStore.setIsLoaded,
|
||||
withMainButton,
|
||||
setFirstLoad,
|
||||
isLoading,
|
||||
setEncryptionKeys: setEncryptionKeys,
|
||||
loadClientInfo: async () => {
|
||||
const actions = [];
|
||||
actions.push(filesStore.initFiles());
|
||||
actions.push(peopleStore.init());
|
||||
await Promise.all(actions);
|
||||
},
|
||||
};
|
||||
})(withTranslation("Common")(observer(ClientContent)));
|
||||
return {
|
||||
isDesktop: isDesktopClient,
|
||||
isFrame,
|
||||
showMenu: frameConfig?.showMenu,
|
||||
user: auth.userStore.user,
|
||||
isAuthenticated: auth.isAuthenticated,
|
||||
encryptionKeys: encryptionKeys,
|
||||
isEncryption: isEncryptionSupport,
|
||||
isLoaded: auth.isLoaded && clientLoadingStore.isLoaded,
|
||||
setIsLoaded: clientLoadingStore.setIsLoaded,
|
||||
withMainButton,
|
||||
|
||||
isLoading,
|
||||
setEncryptionKeys: setEncryptionKeys,
|
||||
loadClientInfo: async () => {
|
||||
const actions = [];
|
||||
actions.push(filesStore.initFiles());
|
||||
actions.push(peopleStore.init());
|
||||
await Promise.all(actions);
|
||||
},
|
||||
};
|
||||
}
|
||||
)(withTranslation("Common")(observer(ClientContent)));
|
||||
|
||||
export default () => <Client />;
|
||||
|
@ -7,7 +7,6 @@ const pathname = window.location.pathname.toLowerCase();
|
||||
const isEditor = pathname.indexOf("doceditor") !== -1;
|
||||
const isGallery = pathname.indexOf("form-gallery") !== -1;
|
||||
|
||||
let loadTimeout = null;
|
||||
const withLoader = (WrappedComponent) => (Loader) => {
|
||||
const withLoader = (props) => {
|
||||
const {
|
||||
@ -15,47 +14,15 @@ const withLoader = (WrappedComponent) => (Loader) => {
|
||||
tReady,
|
||||
firstLoad,
|
||||
isLoaded,
|
||||
isLoading,
|
||||
|
||||
viewAs,
|
||||
setIsBurgerLoading,
|
||||
showBodyLoader,
|
||||
isLoadingFilesFind,
|
||||
} = props;
|
||||
const [inLoad, setInLoad] = useState(false);
|
||||
|
||||
const cleanTimer = () => {
|
||||
loadTimeout && clearTimeout(loadTimeout);
|
||||
loadTimeout = null;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoading) {
|
||||
cleanTimer();
|
||||
loadTimeout = setTimeout(() => {
|
||||
//console.log("inLoad", true);
|
||||
setInLoad(true);
|
||||
}, 500);
|
||||
} else {
|
||||
cleanTimer();
|
||||
//console.log("inLoad", false);
|
||||
setInLoad(false);
|
||||
}
|
||||
|
||||
return () => {
|
||||
cleanTimer();
|
||||
};
|
||||
}, [isLoading]);
|
||||
|
||||
useEffect(() => {
|
||||
if ((!isEditor && firstLoad) || !isLoaded || (isMobile && inLoad)) {
|
||||
setIsBurgerLoading(true);
|
||||
} else {
|
||||
setIsBurgerLoading(false);
|
||||
}
|
||||
}, [isEditor, firstLoad, isLoaded, isMobile, inLoad]);
|
||||
|
||||
return (!isEditor && firstLoad && !isGallery) ||
|
||||
!isLoaded ||
|
||||
(isMobile && inLoad && !firstLoad) ||
|
||||
showBodyLoader ||
|
||||
(isLoadingFilesFind && !Loader) ||
|
||||
!tReady ||
|
||||
!isInit ? (
|
||||
@ -73,14 +40,9 @@ const withLoader = (WrappedComponent) => (Loader) => {
|
||||
);
|
||||
};
|
||||
|
||||
return inject(({ auth, filesStore }) => {
|
||||
const {
|
||||
firstLoad,
|
||||
isLoading,
|
||||
viewAs,
|
||||
isLoadingFilesFind,
|
||||
isInit,
|
||||
} = filesStore;
|
||||
return inject(({ auth, filesStore, clientLoadingStore }) => {
|
||||
const { viewAs, isLoadingFilesFind, isInit } = filesStore;
|
||||
const { firstLoad, isLoading, showBodyLoader } = clientLoadingStore;
|
||||
const { settingsStore } = auth;
|
||||
const { setIsBurgerLoading } = settingsStore;
|
||||
return {
|
||||
@ -91,6 +53,7 @@ const withLoader = (WrappedComponent) => (Loader) => {
|
||||
setIsBurgerLoading,
|
||||
isLoadingFilesFind,
|
||||
isInit,
|
||||
showBodyLoader,
|
||||
};
|
||||
})(observer(withLoader));
|
||||
};
|
||||
|
@ -26,9 +26,7 @@ const PureAccountsItem = ({ showText, isActive, onClick, t }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const AccountsItem = withTranslation(["Common"])(
|
||||
withLoader(PureAccountsItem)(<></>)
|
||||
);
|
||||
const AccountsItem = withTranslation(["Common"])(PureAccountsItem);
|
||||
|
||||
export default inject(({ auth }) => {
|
||||
const { showText } = auth.settingsStore;
|
||||
|
@ -8,7 +8,7 @@ import CatalogFavoritesReactSvgUrl from "PUBLIC_DIR/images/catalog.favorites.rea
|
||||
import CatalogRecentReactSvgUrl from "PUBLIC_DIR/images/catalog.recent.react.svg?url";
|
||||
import CatalogPrivateReactSvgUrl from "PUBLIC_DIR/images/catalog.private.react.svg?url";
|
||||
import CatalogTrashReactSvgUrl from "PUBLIC_DIR/images/catalog.trash.react.svg?url";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useState } from "react";
|
||||
import styled from "styled-components";
|
||||
import PropTypes from "prop-types";
|
||||
import { inject, observer } from "mobx-react";
|
||||
@ -415,6 +415,7 @@ export default inject(
|
||||
filesActionsStore,
|
||||
uploadDataStore,
|
||||
dialogsStore,
|
||||
clientLoadingStore,
|
||||
}) => {
|
||||
const {
|
||||
selection,
|
||||
@ -422,10 +423,12 @@ export default inject(
|
||||
dragging,
|
||||
setDragging,
|
||||
trashIsEmpty,
|
||||
firstLoad,
|
||||
|
||||
startDrag,
|
||||
} = filesStore;
|
||||
|
||||
const { firstLoad } = clientLoadingStore;
|
||||
|
||||
const { startUpload } = uploadDataStore;
|
||||
|
||||
const { treeFolders, myFolderId, commonFolderId, isPrivacyFolder } =
|
||||
|
@ -6,8 +6,6 @@ import CatalogItem from "@docspace/components/catalog-item";
|
||||
|
||||
import CatalogSettingsReactSvgUrl from "PUBLIC_DIR/images/catalog.settings.react.svg?url";
|
||||
|
||||
import withLoader from "../../../HOCs/withLoader";
|
||||
|
||||
const PureSettingsItem = ({ t, showText, isActive, onClick }) => {
|
||||
const onClickAction = React.useCallback(() => {
|
||||
onClick && onClick("settings");
|
||||
@ -27,7 +25,7 @@ const PureSettingsItem = ({ t, showText, isActive, onClick }) => {
|
||||
};
|
||||
|
||||
const SettingsItem = withTranslation(["FilesSettings", "Common"])(
|
||||
withLoader(PureSettingsItem)(<></>)
|
||||
PureSettingsItem
|
||||
);
|
||||
|
||||
export default inject(({ auth }) => {
|
||||
|
@ -17,7 +17,7 @@ import DownloadAppList from "./DownloadAppList";
|
||||
import Banner from "./Banner";
|
||||
|
||||
import Loaders from "@docspace/common/components/Loaders";
|
||||
import withLoader from "../../../HOCs/withLoader";
|
||||
|
||||
import { getCategoryUrl } from "SRC_DIR/helpers/utils";
|
||||
import { CategoryType } from "SRC_DIR/helpers/constants";
|
||||
|
||||
@ -31,10 +31,10 @@ const StyledBlock = styled.div`
|
||||
|
||||
const ArticleBodyContent = (props) => {
|
||||
const {
|
||||
// isDesktopClient,
|
||||
// firstLoad,
|
||||
// FirebaseHelper,
|
||||
// theme,
|
||||
isDesktopClient,
|
||||
firstLoad,
|
||||
FirebaseHelper,
|
||||
theme,
|
||||
|
||||
showText,
|
||||
toggleArticleOpen,
|
||||
@ -50,6 +50,8 @@ const ArticleBodyContent = (props) => {
|
||||
|
||||
clearFiles,
|
||||
selectedFolderId,
|
||||
showArticleLoader,
|
||||
setIsBurgerLoading,
|
||||
} = props;
|
||||
|
||||
const navigate = useNavigate();
|
||||
@ -58,15 +60,14 @@ const ArticleBodyContent = (props) => {
|
||||
const [disableBadgeClick, setDisableBadgeClick] = React.useState(false);
|
||||
const [activeItem, setActiveItem] = React.useState(null);
|
||||
|
||||
// const campaigns = (localStorage.getItem("campaigns") || "")
|
||||
// .split(",")
|
||||
// .filter((campaign) => campaign.length > 0);
|
||||
const campaigns = (localStorage.getItem("campaigns") || "")
|
||||
.split(",")
|
||||
.filter((campaign) => campaign.length > 0);
|
||||
|
||||
const onClick = React.useCallback(
|
||||
(folderId, title, rootFolderType) => {
|
||||
const { toggleArticleOpen } = props;
|
||||
|
||||
// let path = `/rooms`;
|
||||
let params = null;
|
||||
let path = ``;
|
||||
|
||||
@ -76,6 +77,8 @@ const ArticleBodyContent = (props) => {
|
||||
rootFolderType,
|
||||
};
|
||||
|
||||
let withTimer = !!selectedFolderId;
|
||||
|
||||
switch (folderId) {
|
||||
case myFolderId:
|
||||
const myFilter = FilesFilter.getDefault();
|
||||
@ -113,6 +116,8 @@ const ArticleBodyContent = (props) => {
|
||||
params = accountsFilter.toUrlParams();
|
||||
path = getCategoryUrl(CategoryType.Accounts);
|
||||
|
||||
withTimer = false;
|
||||
|
||||
break;
|
||||
case "settings":
|
||||
clearFiles();
|
||||
@ -135,7 +140,7 @@ const ArticleBodyContent = (props) => {
|
||||
break;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setIsLoading(true, withTimer);
|
||||
path += `?${params}`;
|
||||
|
||||
navigate(path, { state });
|
||||
@ -220,6 +225,12 @@ const ArticleBodyContent = (props) => {
|
||||
rootFolderId,
|
||||
]);
|
||||
|
||||
React.useEffect(() => {
|
||||
setIsBurgerLoading(showArticleLoader);
|
||||
}, [showArticleLoader]);
|
||||
|
||||
if (showArticleLoader) return <Loaders.ArticleFolder />;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Items
|
||||
@ -249,8 +260,20 @@ export default inject(
|
||||
treeFoldersStore,
|
||||
dialogsStore,
|
||||
selectedFolderStore,
|
||||
clientLoadingStore,
|
||||
}) => {
|
||||
const { firstLoad, setIsLoading, clearFiles } = filesStore;
|
||||
const { clearFiles } = filesStore;
|
||||
const {
|
||||
showArticleLoader,
|
||||
setIsSectionBodyLoading,
|
||||
setIsSectionFilterLoading,
|
||||
firstLoad,
|
||||
} = clientLoadingStore;
|
||||
|
||||
const setIsLoading = (param, withTimer) => {
|
||||
setIsSectionBodyLoading(param, withTimer);
|
||||
setIsSectionFilterLoading(param, withTimer);
|
||||
};
|
||||
|
||||
const { roomsFolderId, archiveFolderId, myFolderId, recycleBinFolderId } =
|
||||
treeFoldersStore;
|
||||
@ -269,12 +292,13 @@ export default inject(
|
||||
isDesktopClient,
|
||||
FirebaseHelper,
|
||||
theme,
|
||||
setIsBurgerLoading,
|
||||
} = auth.settingsStore;
|
||||
|
||||
return {
|
||||
toggleArticleOpen,
|
||||
showText,
|
||||
|
||||
showArticleLoader,
|
||||
isVisitor: auth.userStore.user.isVisitor,
|
||||
|
||||
setNewFilesPanelVisible,
|
||||
@ -294,10 +318,7 @@ export default inject(
|
||||
|
||||
clearFiles,
|
||||
selectedFolderId,
|
||||
setIsBurgerLoading,
|
||||
};
|
||||
}
|
||||
)(
|
||||
withTranslation([])(
|
||||
withLoader(observer(ArticleBodyContent))(<Loaders.ArticleFolder />)
|
||||
)
|
||||
);
|
||||
)(withTranslation([])(observer(ArticleBodyContent)));
|
||||
|
@ -23,9 +23,7 @@ import { encryptionUploadDialog } from "../../../helpers/desktop";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
|
||||
import MobileView from "./MobileView";
|
||||
import { combineUrl } from "@docspace/common/utils";
|
||||
import config from "PACKAGE_FILE";
|
||||
import withLoader from "../../../HOCs/withLoader";
|
||||
|
||||
import { Events, EmployeeType } from "@docspace/common/constants";
|
||||
import { getMainButtonItems } from "SRC_DIR/helpers/plugins";
|
||||
|
||||
@ -89,6 +87,7 @@ const StyledButton = styled(Button)`
|
||||
const ArticleMainButtonContent = (props) => {
|
||||
const {
|
||||
t,
|
||||
tReady,
|
||||
isMobileArticle,
|
||||
|
||||
isPrivacy,
|
||||
@ -97,7 +96,7 @@ const ArticleMainButtonContent = (props) => {
|
||||
startUpload,
|
||||
setAction,
|
||||
setSelectFileDialogVisible,
|
||||
isArticleLoading,
|
||||
showArticleLoader,
|
||||
isFavoritesFolder,
|
||||
isRecentFolder,
|
||||
isRecycleBinFolder,
|
||||
@ -460,23 +459,24 @@ const ArticleMainButtonContent = (props) => {
|
||||
|
||||
const isProfile = location.pathname === "/accounts/view/@self";
|
||||
|
||||
if (showArticleLoader || !tReady)
|
||||
return isMobileArticle ? null : <Loaders.ArticleButton height="32px" />;
|
||||
|
||||
return (
|
||||
<>
|
||||
{isMobileArticle ? (
|
||||
<>
|
||||
{!isArticleLoading &&
|
||||
!isProfile &&
|
||||
(security?.Create || isAccountsPage) && (
|
||||
<MobileView
|
||||
t={t}
|
||||
titleProp={t("Upload")}
|
||||
actionOptions={actions}
|
||||
buttonOptions={uploadActions}
|
||||
isRooms={isRoomsFolder}
|
||||
mainButtonMobileVisible={mainButtonMobileVisible}
|
||||
onMainButtonClick={onCreateRoom}
|
||||
/>
|
||||
)}
|
||||
{!isProfile && (security?.Create || isAccountsPage) && (
|
||||
<MobileView
|
||||
t={t}
|
||||
titleProp={t("Upload")}
|
||||
actionOptions={actions}
|
||||
buttonOptions={uploadActions}
|
||||
isRooms={isRoomsFolder}
|
||||
mainButtonMobileVisible={mainButtonMobileVisible}
|
||||
onMainButtonClick={onCreateRoom}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
) : isRoomsFolder ? (
|
||||
<StyledButton
|
||||
@ -539,14 +539,10 @@ export default inject(
|
||||
uploadDataStore,
|
||||
treeFoldersStore,
|
||||
selectedFolderStore,
|
||||
clientLoadingStore,
|
||||
}) => {
|
||||
const {
|
||||
isLoaded,
|
||||
firstLoad,
|
||||
isLoading,
|
||||
|
||||
mainButtonMobileVisible,
|
||||
} = filesStore;
|
||||
const { showArticleLoader } = clientLoadingStore;
|
||||
const { mainButtonMobileVisible } = filesStore;
|
||||
const {
|
||||
isPrivacyFolder,
|
||||
isFavoritesFolder,
|
||||
@ -563,8 +559,6 @@ export default inject(
|
||||
setInviteUsersWarningDialogVisible,
|
||||
} = dialogsStore;
|
||||
|
||||
const isArticleLoading = (!isLoaded || isLoading) && firstLoad;
|
||||
|
||||
const { enablePlugins, currentColorScheme } = auth.settingsStore;
|
||||
|
||||
const security = selectedFolderStore.security;
|
||||
@ -580,7 +574,7 @@ export default inject(
|
||||
showText: auth.settingsStore.showText,
|
||||
isMobileArticle: auth.settingsStore.isMobileArticle,
|
||||
|
||||
isArticleLoading,
|
||||
showArticleLoader,
|
||||
isPrivacy: isPrivacyFolder,
|
||||
isFavoritesFolder,
|
||||
isRecentFolder,
|
||||
@ -595,9 +589,6 @@ export default inject(
|
||||
setSelectFileDialogVisible,
|
||||
setInvitePanelOptions,
|
||||
|
||||
isLoading,
|
||||
isLoaded,
|
||||
firstLoad,
|
||||
currentFolderId,
|
||||
|
||||
enablePlugins,
|
||||
@ -618,9 +609,5 @@ export default inject(
|
||||
"Files",
|
||||
"People",
|
||||
"PeopleTranslations",
|
||||
])(
|
||||
withLoader(observer(ArticleMainButtonContent))(
|
||||
<Loaders.ArticleButton height="28px" />
|
||||
)
|
||||
)
|
||||
])(observer(ArticleMainButtonContent))
|
||||
);
|
||||
|
@ -83,14 +83,20 @@ const EmptyFilterContainer = ({
|
||||
};
|
||||
|
||||
export default inject(
|
||||
({ auth, filesStore, selectedFolderStore, treeFoldersStore }) => {
|
||||
({
|
||||
auth,
|
||||
filesStore,
|
||||
selectedFolderStore,
|
||||
treeFoldersStore,
|
||||
clientLoadingStore,
|
||||
}) => {
|
||||
const { isRoomsFolder, isArchiveFolder } = treeFoldersStore;
|
||||
|
||||
const isRooms = isRoomsFolder || isArchiveFolder;
|
||||
|
||||
return {
|
||||
selectedFolderId: selectedFolderStore.id,
|
||||
setIsLoading: filesStore.setIsLoading,
|
||||
setIsLoading: clientLoadingStore.setIsSectionBodyLoading,
|
||||
isRooms,
|
||||
isArchiveFolder,
|
||||
isRoomsFolder,
|
||||
|
@ -39,7 +39,7 @@ const EmptyFolderContainer = ({
|
||||
|
||||
navigationPath,
|
||||
rootFolderType,
|
||||
clearFiles,
|
||||
|
||||
roomType,
|
||||
isLoading,
|
||||
}) => {
|
||||
@ -210,11 +210,11 @@ export default inject(
|
||||
({
|
||||
auth,
|
||||
accessRightsStore,
|
||||
filesStore,
|
||||
|
||||
selectedFolderStore,
|
||||
contextOptionsStore,
|
||||
clientLoadingStore,
|
||||
}) => {
|
||||
const { clearFiles, isLoading } = filesStore;
|
||||
const {
|
||||
navigationPath,
|
||||
parentId,
|
||||
@ -236,8 +236,16 @@ export default inject(
|
||||
|
||||
const { onClickInviteUsers } = contextOptionsStore;
|
||||
|
||||
const { setIsSectionBodyLoading, setIsSectionFilterLoading, isLoading } =
|
||||
clientLoadingStore;
|
||||
|
||||
const setIsLoading = (param) => {
|
||||
setIsSectionBodyLoading(param);
|
||||
setIsSectionFilterLoading(param);
|
||||
};
|
||||
|
||||
return {
|
||||
setIsLoading: filesStore.setIsLoading,
|
||||
setIsLoading,
|
||||
isLoading,
|
||||
parentId: id ?? parentId,
|
||||
roomType,
|
||||
@ -245,7 +253,7 @@ export default inject(
|
||||
|
||||
navigationPath,
|
||||
rootFolderType,
|
||||
clearFiles,
|
||||
|
||||
editAccess: security?.EditAccess,
|
||||
onClickInviteUsers,
|
||||
folderId,
|
||||
|
@ -81,12 +81,15 @@ const RoomNoAccessContainer = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth, filesStore }) => {
|
||||
const {
|
||||
setIsLoading,
|
||||
export default inject(({ auth, filesStore, clientLoadingStore }) => {
|
||||
const { setIsSectionBodyLoading, setIsSectionFilterLoading } =
|
||||
clientLoadingStore;
|
||||
|
||||
isEmptyPage,
|
||||
} = filesStore;
|
||||
const setIsLoading = (param) => {
|
||||
setIsSectionBodyLoading(param);
|
||||
setIsSectionFilterLoading(param);
|
||||
};
|
||||
const { isEmptyPage } = filesStore;
|
||||
return {
|
||||
setIsLoading,
|
||||
|
||||
|
@ -60,7 +60,6 @@ const RootFolderContainer = (props) => {
|
||||
setIsLoading,
|
||||
rootFolderType,
|
||||
linkStyles,
|
||||
isLoading,
|
||||
|
||||
isEmptyPage,
|
||||
|
||||
@ -72,7 +71,6 @@ const RootFolderContainer = (props) => {
|
||||
|
||||
myFolder,
|
||||
roomsFolder,
|
||||
clearFiles,
|
||||
} = props;
|
||||
const personalDescription = t("EmptyFolderDecription");
|
||||
|
||||
@ -368,19 +366,30 @@ const RootFolderContainer = (props) => {
|
||||
};
|
||||
|
||||
export default inject(
|
||||
({ auth, filesStore, treeFoldersStore, selectedFolderStore }) => {
|
||||
({
|
||||
auth,
|
||||
filesStore,
|
||||
treeFoldersStore,
|
||||
selectedFolderStore,
|
||||
clientLoadingStore,
|
||||
}) => {
|
||||
const { isDesktopClient, isEncryptionSupport, organizationName, theme } =
|
||||
auth.settingsStore;
|
||||
|
||||
const { setIsSectionBodyLoading, setIsSectionFilterLoading } =
|
||||
clientLoadingStore;
|
||||
|
||||
const setIsLoading = (param) => {
|
||||
setIsSectionBodyLoading(param);
|
||||
setIsSectionFilterLoading(param);
|
||||
};
|
||||
|
||||
const {
|
||||
filter,
|
||||
|
||||
privacyInstructions,
|
||||
isLoading,
|
||||
setIsLoading,
|
||||
|
||||
isEmptyPage,
|
||||
clearFiles,
|
||||
} = filesStore;
|
||||
const { title, rootFolderType, security } = selectedFolderStore;
|
||||
const { isPrivacyFolder, myFolderId, myFolder, roomsFolder } =
|
||||
@ -399,7 +408,6 @@ export default inject(
|
||||
myFolderId,
|
||||
filter,
|
||||
|
||||
isLoading,
|
||||
setIsLoading,
|
||||
rootFolderType,
|
||||
|
||||
@ -409,7 +417,6 @@ export default inject(
|
||||
|
||||
myFolder,
|
||||
roomsFolder,
|
||||
clearFiles,
|
||||
};
|
||||
}
|
||||
)(withTranslation(["Files"])(observer(RootFolderContainer)));
|
||||
|
@ -94,8 +94,10 @@ export default inject(
|
||||
dialogsStore,
|
||||
|
||||
selectedFolderStore,
|
||||
clientLoadingStore,
|
||||
}) => {
|
||||
const { isErrorRoomNotAvailable, isFiltered, isLoading } = filesStore;
|
||||
const { isErrorRoomNotAvailable, isFiltered } = filesStore;
|
||||
const { isLoading } = clientLoadingStore;
|
||||
|
||||
const { isGracePeriod } = auth.currentTariffStatusStore;
|
||||
|
||||
|
@ -86,13 +86,16 @@ FolderTreeBody.defaultProps = {
|
||||
};
|
||||
|
||||
export default inject(
|
||||
({ filesStore, treeFoldersStore, selectedFolderStore }) => {
|
||||
const { filter, isLoading } = filesStore;
|
||||
const {
|
||||
expandedPanelKeys,
|
||||
isLoadingNodes,
|
||||
setIsLoadingNodes,
|
||||
} = treeFoldersStore;
|
||||
({
|
||||
filesStore,
|
||||
treeFoldersStore,
|
||||
selectedFolderStore,
|
||||
clientLoadingStore,
|
||||
}) => {
|
||||
const { filter } = filesStore;
|
||||
const { isLoading } = clientLoadingStore;
|
||||
const { expandedPanelKeys, isLoadingNodes, setIsLoadingNodes } =
|
||||
treeFoldersStore;
|
||||
const expandedKeysProp = expandedPanelKeys
|
||||
? expandedPanelKeys
|
||||
: selectedFolderStore.pathParts;
|
||||
|
@ -301,9 +301,16 @@ export default inject(
|
||||
dialogsStore,
|
||||
oformsStore,
|
||||
settingsStore,
|
||||
clientLoadingStore,
|
||||
}) => {
|
||||
const { setIsSectionBodyLoading, setIsSectionFilterLoading } =
|
||||
clientLoadingStore;
|
||||
|
||||
const setIsLoading = (param) => {
|
||||
setIsSectionBodyLoading(param);
|
||||
};
|
||||
|
||||
const {
|
||||
setIsLoading,
|
||||
createFile,
|
||||
createFolder,
|
||||
addActiveItems,
|
||||
|
@ -79,9 +79,8 @@ const CreateRoomEvent = ({
|
||||
|
||||
export default inject(
|
||||
({
|
||||
auth,
|
||||
createEditRoomStore,
|
||||
filesStore,
|
||||
|
||||
tagsStore,
|
||||
dialogsStore,
|
||||
settingsStore,
|
||||
|
@ -10,7 +10,6 @@ const RenameEvent = ({
|
||||
item,
|
||||
onClose,
|
||||
|
||||
setIsLoading,
|
||||
addActiveItems,
|
||||
|
||||
updateFile,
|
||||
@ -135,8 +134,7 @@ export default inject(
|
||||
uploadDataStore,
|
||||
dialogsStore,
|
||||
}) => {
|
||||
const { setIsLoading, addActiveItems, updateFile, renameFolder } =
|
||||
filesStore;
|
||||
const { addActiveItems, updateFile, renameFolder } = filesStore;
|
||||
|
||||
const { id, setSelectedFolder } = selectedFolderStore;
|
||||
|
||||
@ -146,7 +144,6 @@ export default inject(
|
||||
const { setEventDialogVisible, eventDialogVisible } = dialogsStore;
|
||||
|
||||
return {
|
||||
setIsLoading,
|
||||
addActiveItems,
|
||||
updateFile,
|
||||
renameFolder,
|
||||
|
@ -61,15 +61,16 @@ const MainBar = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth, filesStore }) => {
|
||||
export default inject(({ auth, clientLoadingStore, filesStore }) => {
|
||||
const { currentTariffStatusStore, settingsStore } = auth;
|
||||
const { checkedMaintenance, setMaintenanceExist, snackbarExist } =
|
||||
settingsStore;
|
||||
const { isNotPaidPeriod } = currentTariffStatusStore;
|
||||
const { firstLoad } = filesStore;
|
||||
const { firstLoad } = clientLoadingStore;
|
||||
const { isInit } = filesStore;
|
||||
|
||||
return {
|
||||
firstLoad,
|
||||
firstLoad: firstLoad && isInit,
|
||||
checkedMaintenance,
|
||||
snackbarExist,
|
||||
setMaintenanceExist,
|
||||
|
@ -130,30 +130,31 @@ const ChangeOwnerPanel = withTranslation(["ChangeOwnerPanel", "Common"])(
|
||||
withLoader(ChangeOwnerComponent)(<Loaders.DialogAsideLoader isPanel />)
|
||||
);
|
||||
|
||||
export default inject(({ auth, filesStore, dialogsStore }) => {
|
||||
const {
|
||||
selection,
|
||||
bufferSelection,
|
||||
setFile,
|
||||
setFolder,
|
||||
setFilesOwner,
|
||||
setIsLoading,
|
||||
isLoading,
|
||||
setBufferSelection,
|
||||
} = filesStore;
|
||||
const { ownerPanelVisible, setChangeOwnerPanelVisible } = dialogsStore;
|
||||
export default inject(
|
||||
({ auth, filesStore, dialogsStore, clientLoadingStore }) => {
|
||||
const {
|
||||
selection,
|
||||
bufferSelection,
|
||||
setFile,
|
||||
setFolder,
|
||||
setFilesOwner,
|
||||
|
||||
return {
|
||||
theme: auth.settingsStore.theme,
|
||||
selection: selection.length ? selection : [bufferSelection],
|
||||
isLoading,
|
||||
visible: ownerPanelVisible,
|
||||
setBufferSelection,
|
||||
} = filesStore;
|
||||
const { ownerPanelVisible, setChangeOwnerPanelVisible } = dialogsStore;
|
||||
|
||||
setFile,
|
||||
setFolder,
|
||||
setIsLoading,
|
||||
setChangeOwnerPanelVisible,
|
||||
setFilesOwner,
|
||||
setBufferSelection,
|
||||
};
|
||||
})(observer(ChangeOwnerPanel));
|
||||
return {
|
||||
theme: auth.settingsStore.theme,
|
||||
selection: selection.length ? selection : [bufferSelection],
|
||||
isLoading: clientLoadingStore.isLoading,
|
||||
visible: ownerPanelVisible,
|
||||
|
||||
setFile,
|
||||
setFolder,
|
||||
setIsLoading: clientLoadingStore.setIsSectionBodyLoading,
|
||||
setChangeOwnerPanelVisible,
|
||||
setFilesOwner,
|
||||
setBufferSelection,
|
||||
};
|
||||
}
|
||||
)(observer(ChangeOwnerPanel));
|
||||
|
@ -136,8 +136,7 @@ class NewFilesPanel extends React.Component {
|
||||
fileType,
|
||||
providerKey,
|
||||
rootFolderType,
|
||||
filesCount,
|
||||
foldersCount,
|
||||
|
||||
title,
|
||||
} = item;
|
||||
const {
|
||||
@ -148,7 +147,6 @@ class NewFilesPanel extends React.Component {
|
||||
|
||||
currentFolderId,
|
||||
setIsLoading,
|
||||
clearFiles,
|
||||
} = this.props;
|
||||
|
||||
if (!fileExst) {
|
||||
@ -365,16 +363,19 @@ export default inject(
|
||||
}) => {
|
||||
const {
|
||||
addFileToRecentlyViewed,
|
||||
//setIsLoading,
|
||||
isLoading,
|
||||
//updateFilesBadge,
|
||||
//updateFolderBadge,
|
||||
//updateFoldersBadge,
|
||||
|
||||
hasNew,
|
||||
refreshFiles,
|
||||
clearFiles,
|
||||
setIsLoading,
|
||||
} = filesStore;
|
||||
|
||||
const { setIsSectionBodyLoading, setIsSectionFilterLoading, isLoading } =
|
||||
clientLoadingStore;
|
||||
|
||||
const setIsLoading = (param) => {
|
||||
setIsSectionBodyLoading(param);
|
||||
setIsSectionFilterLoading(param);
|
||||
};
|
||||
|
||||
//const { updateRootBadge } = treeFoldersStore;
|
||||
const { playlist, setMediaViewerData, setCurrentItem } =
|
||||
mediaViewerDataStore;
|
||||
@ -400,24 +401,17 @@ export default inject(
|
||||
setCurrentItem,
|
||||
currentFolderId,
|
||||
|
||||
//setIsLoading,
|
||||
|
||||
setMediaViewerData,
|
||||
addFileToRecentlyViewed,
|
||||
getIcon,
|
||||
getFolderIcon,
|
||||
markAsRead,
|
||||
setNewFilesPanelVisible,
|
||||
// updateRootBadge,
|
||||
// updateFolderBadge,
|
||||
// updateFoldersBadge,
|
||||
// updateFilesBadge,
|
||||
|
||||
theme: auth.settingsStore.theme,
|
||||
hasNew,
|
||||
refreshFiles,
|
||||
|
||||
clearFiles,
|
||||
setIsLoading,
|
||||
};
|
||||
}
|
||||
|
@ -11,12 +11,8 @@ class SelectFileInput extends React.PureComponent {
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
const {
|
||||
setExpandedPanelKeys,
|
||||
setFolderId,
|
||||
setFile,
|
||||
onSelectFile,
|
||||
} = this.props;
|
||||
const { setExpandedPanelKeys, setFolderId, setFile, onSelectFile } =
|
||||
this.props;
|
||||
|
||||
setExpandedPanelKeys(null);
|
||||
setFolderId(null);
|
||||
@ -75,8 +71,8 @@ SelectFileInput.defaultProps = {
|
||||
};
|
||||
|
||||
export default inject(
|
||||
({ filesStore, treeFoldersStore, selectFileDialogStore }) => {
|
||||
const { setFirstLoad } = filesStore;
|
||||
({ clientLoadingStore, treeFoldersStore, selectFileDialogStore }) => {
|
||||
const { setFirstLoad } = clientLoadingStore;
|
||||
const { folderId, setFolderId, setFile, fileInfo } = selectFileDialogStore;
|
||||
const fileName = fileInfo?.title;
|
||||
const { setExpandedPanelKeys } = treeFoldersStore;
|
||||
|
@ -199,14 +199,14 @@ SelectFolderInput.defaultProps = {
|
||||
|
||||
export default inject(
|
||||
({
|
||||
filesStore,
|
||||
clientLoadingStore,
|
||||
treeFoldersStore,
|
||||
selectFolderDialogStore,
|
||||
selectedFolderStore,
|
||||
backup,
|
||||
}) => {
|
||||
const { clearLocalStorage } = backup;
|
||||
const { setFirstLoad } = filesStore;
|
||||
const { setFirstLoad } = clientLoadingStore;
|
||||
const { setExpandedPanelKeys } = treeFoldersStore;
|
||||
const {
|
||||
isLoading,
|
||||
|
@ -99,9 +99,9 @@ VersionHistoryPanel.propTypes = {
|
||||
fileId: PropTypes.string,
|
||||
};
|
||||
|
||||
export default inject(({ auth, filesStore, versionHistoryStore }) => {
|
||||
export default inject(({ auth, clientLoadingStore, versionHistoryStore }) => {
|
||||
const { isTabletView } = auth.settingsStore;
|
||||
const { isLoading } = filesStore;
|
||||
const { isLoading } = clientLoadingStore;
|
||||
const {
|
||||
fileId,
|
||||
versions,
|
||||
|
@ -10,7 +10,6 @@ const useAccounts = ({
|
||||
location,
|
||||
|
||||
setIsLoading,
|
||||
setFirstLoad,
|
||||
|
||||
setSelectedNode,
|
||||
fetchPeople,
|
||||
@ -31,7 +30,6 @@ const useAccounts = ({
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoading(false);
|
||||
setFirstLoad(false);
|
||||
});
|
||||
}, [isAccountsPage, location.pathname, location.search]);
|
||||
};
|
||||
|
@ -25,7 +25,6 @@ const useFiles = ({
|
||||
fetchFiles,
|
||||
fetchRooms,
|
||||
setIsLoading,
|
||||
setFirstLoad,
|
||||
|
||||
isAccountsPage,
|
||||
isSettingsPage,
|
||||
@ -264,7 +263,6 @@ const useFiles = ({
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoading(false);
|
||||
setFirstLoad(false);
|
||||
});
|
||||
}, [location.pathname, location.search, isAccountsPage, isSettingsPage]);
|
||||
|
||||
|
@ -2,14 +2,13 @@ import React from "react";
|
||||
|
||||
import { setDocumentTitle } from "SRC_DIR/helpers/utils";
|
||||
|
||||
const useSettings = ({ t, isSettingsPage, setFirstLoad, setIsLoading }) => {
|
||||
const useSettings = ({ t, isSettingsPage, setIsLoading }) => {
|
||||
React.useEffect(() => {
|
||||
if (!isSettingsPage) return;
|
||||
|
||||
setDocumentTitle(t("Common:Settings"));
|
||||
|
||||
setIsLoading(false);
|
||||
setFirstLoad(false);
|
||||
}, [isSettingsPage]);
|
||||
};
|
||||
|
||||
|
@ -22,18 +22,18 @@ const FilesMediaViewer = (props) => {
|
||||
previewFile,
|
||||
fetchFiles,
|
||||
setIsLoading,
|
||||
setFirstLoad,
|
||||
|
||||
setToPreviewFile,
|
||||
setScrollToItem,
|
||||
setCurrentId,
|
||||
setAlreadyFetchingRooms,
|
||||
|
||||
setBufferSelection,
|
||||
isFavoritesFolder,
|
||||
|
||||
archiveRoomsId,
|
||||
onClickFavorite,
|
||||
|
||||
onShowInfoPanel,
|
||||
onClickDownload,
|
||||
onClickDownloadAs,
|
||||
|
||||
onClickRename,
|
||||
onClickDelete,
|
||||
onMoveAction,
|
||||
@ -77,7 +77,6 @@ const FilesMediaViewer = (props) => {
|
||||
// fetch file after preview with
|
||||
fetchFiles(previewFile.folderId).finally(() => {
|
||||
setIsLoading(false);
|
||||
setFirstLoad(false);
|
||||
});
|
||||
}
|
||||
}, [previewFile]);
|
||||
@ -228,14 +227,25 @@ export default inject(
|
||||
dialogsStore,
|
||||
treeFoldersStore,
|
||||
contextOptionsStore,
|
||||
clientLoadingStore,
|
||||
}) => {
|
||||
const {
|
||||
firstLoad,
|
||||
|
||||
setIsSectionBodyLoading,
|
||||
setIsSectionFilterLoading,
|
||||
} = clientLoadingStore;
|
||||
|
||||
const setIsLoading = (param) => {
|
||||
setIsSectionBodyLoading(param);
|
||||
setIsSectionFilterLoading(param);
|
||||
};
|
||||
|
||||
const {
|
||||
files,
|
||||
userAccess,
|
||||
fetchFiles,
|
||||
setIsLoading,
|
||||
firstLoad,
|
||||
setFirstLoad,
|
||||
|
||||
setScrollToItem,
|
||||
setBufferSelection,
|
||||
setIsPreview,
|
||||
@ -294,7 +304,7 @@ export default inject(
|
||||
previewFile,
|
||||
setIsLoading,
|
||||
firstLoad,
|
||||
setFirstLoad,
|
||||
|
||||
setToPreviewFile,
|
||||
setIsPreview,
|
||||
resetUrl,
|
||||
|
@ -11,7 +11,7 @@ import Link from "@docspace/components/link";
|
||||
import Box from "@docspace/components/box";
|
||||
import Grid from "@docspace/components/grid";
|
||||
|
||||
const EmptyScreen = ({ resetFilter, isEmptyGroup, setIsLoading, theme }) => {
|
||||
const EmptyScreen = ({ resetFilter, setIsLoading, theme }) => {
|
||||
const { t } = useTranslation(["People", "Common"]);
|
||||
|
||||
const title = t("NotFoundUsers");
|
||||
@ -19,7 +19,7 @@ const EmptyScreen = ({ resetFilter, isEmptyGroup, setIsLoading, theme }) => {
|
||||
|
||||
const onResetFilter = () => {
|
||||
setIsLoading(true);
|
||||
resetFilter().finally(() => setIsLoading(false));
|
||||
resetFilter();
|
||||
};
|
||||
|
||||
const imageSrc = theme.isBase
|
||||
@ -68,10 +68,14 @@ const EmptyScreen = ({ resetFilter, isEmptyGroup, setIsLoading, theme }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth, peopleStore, filesStore }) => {
|
||||
const { resetFilter, selectedGroupStore } = peopleStore;
|
||||
const { isEmptyGroup } = selectedGroupStore;
|
||||
const { setIsLoading } = filesStore;
|
||||
export default inject(({ auth, peopleStore, clientLoadingStore }) => {
|
||||
const { resetFilter } = peopleStore;
|
||||
|
||||
const { setIsSectionBodyLoading } = clientLoadingStore;
|
||||
|
||||
const setIsLoading = (param) => {
|
||||
setIsSectionBodyLoading(param);
|
||||
};
|
||||
return {
|
||||
resetFilter,
|
||||
isEmptyGroup,
|
||||
|
@ -8,6 +8,7 @@ import RowContainer from "@docspace/components/row-container";
|
||||
import EmptyScreen from "../EmptyScreen";
|
||||
|
||||
import SimpleUserRow from "./SimpleUserRow";
|
||||
import withLoader from "SRC_DIR/HOCs/withLoader";
|
||||
|
||||
const marginStyles = css`
|
||||
margin-left: -24px;
|
||||
@ -100,7 +101,6 @@ const PeopleRowContainer = ({
|
||||
hasMoreAccounts,
|
||||
filterTotal,
|
||||
withPaging,
|
||||
isLoading,
|
||||
}) => {
|
||||
useEffect(() => {
|
||||
const width = window.innerWidth;
|
||||
@ -123,8 +123,6 @@ const PeopleRowContainer = ({
|
||||
}
|
||||
}, [sectionWidth]);
|
||||
|
||||
if (isLoading) return <></>;
|
||||
|
||||
return peopleList.length !== 0 || !isFiltered ? (
|
||||
<StyledRowContainer
|
||||
className="people-row-container"
|
||||
@ -162,8 +160,6 @@ export default inject(({ peopleStore, auth, filesStore }) => {
|
||||
|
||||
const { isVisible: infoPanelVisible } = auth.infoPanelStore;
|
||||
|
||||
const { isLoading } = filesStore;
|
||||
|
||||
return {
|
||||
peopleList,
|
||||
accountsViewAs,
|
||||
@ -171,7 +167,7 @@ export default inject(({ peopleStore, auth, filesStore }) => {
|
||||
theme,
|
||||
infoPanelVisible,
|
||||
withPaging,
|
||||
isLoading,
|
||||
|
||||
fetchMoreAccounts,
|
||||
hasMoreAccounts,
|
||||
filterTotal,
|
||||
|
@ -104,7 +104,6 @@ const Table = ({
|
||||
userId,
|
||||
infoPanelVisible,
|
||||
|
||||
isLoading,
|
||||
fetchMoreAccounts,
|
||||
hasMoreAccounts,
|
||||
filterTotal,
|
||||
@ -143,8 +142,6 @@ const Table = ({
|
||||
const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
|
||||
const columnInfoPanelStorageName = `${INFO_PANEL_COLUMNS_SIZE}=${userId}`;
|
||||
|
||||
// if (isLoading) return <></>;
|
||||
|
||||
return peopleList.length !== 0 || !isFiltered ? (
|
||||
<StyledTableContainer useReactWindow={!withPaging} forwardedRef={ref}>
|
||||
<TableHeader
|
||||
@ -205,8 +202,6 @@ export default inject(
|
||||
|
||||
const { canChangeUserType } = accessRightsStore;
|
||||
|
||||
const { isLoading } = filesStore;
|
||||
|
||||
return {
|
||||
peopleList,
|
||||
accountsViewAs,
|
||||
@ -218,7 +213,7 @@ export default inject(
|
||||
userId,
|
||||
infoPanelVisible,
|
||||
withPaging,
|
||||
isLoading,
|
||||
|
||||
fetchMoreAccounts,
|
||||
hasMoreAccounts,
|
||||
filterTotal,
|
||||
|
@ -172,20 +172,18 @@ class PeopleTableHeader extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
export default inject(({ auth, peopleStore, filesStore }) => {
|
||||
export default inject(({ auth, peopleStore, clientLoadingStore }) => {
|
||||
const { filterStore } = peopleStore;
|
||||
|
||||
const { filter } = filterStore;
|
||||
|
||||
const { setIsLoading } = filesStore;
|
||||
|
||||
const { isVisible: infoPanelVisible } = auth.infoPanelStore;
|
||||
const { withPaging } = auth.settingsStore;
|
||||
|
||||
return {
|
||||
filter,
|
||||
|
||||
setIsLoading,
|
||||
setIsLoading: clientLoadingStore.setIsSectionBodyLoading,
|
||||
userId: auth.userStore.user.id,
|
||||
infoPanelVisible,
|
||||
withPaging,
|
||||
|
@ -422,12 +422,19 @@ class FilesTableHeader extends React.Component {
|
||||
}
|
||||
|
||||
export default inject(
|
||||
({ auth, filesStore, selectedFolderStore, treeFoldersStore, tableStore }) => {
|
||||
({
|
||||
auth,
|
||||
filesStore,
|
||||
selectedFolderStore,
|
||||
treeFoldersStore,
|
||||
tableStore,
|
||||
clientLoadingStore,
|
||||
}) => {
|
||||
const { isVisible: infoPanelVisible } = auth.infoPanelStore;
|
||||
|
||||
const {
|
||||
isHeaderChecked,
|
||||
setIsLoading,
|
||||
|
||||
filter,
|
||||
|
||||
canShare,
|
||||
@ -478,7 +485,7 @@ export default inject(
|
||||
withContent,
|
||||
sortingVisible,
|
||||
|
||||
setIsLoading,
|
||||
setIsLoading: clientLoadingStore.setIsSectionBodyLoading,
|
||||
|
||||
roomsFilter,
|
||||
|
||||
|
@ -197,29 +197,32 @@ const InfiniteGrid = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ filesStore, treeFoldersStore }) => {
|
||||
const {
|
||||
filesList,
|
||||
hasMoreFiles,
|
||||
filterTotal,
|
||||
fetchMoreFiles,
|
||||
getCountTilesInRow,
|
||||
roomsFilterTotal,
|
||||
isLoading,
|
||||
} = filesStore;
|
||||
export default inject(
|
||||
({ filesStore, treeFoldersStore, clientLoadingStore }) => {
|
||||
const {
|
||||
filesList,
|
||||
hasMoreFiles,
|
||||
filterTotal,
|
||||
fetchMoreFiles,
|
||||
getCountTilesInRow,
|
||||
roomsFilterTotal,
|
||||
} = filesStore;
|
||||
|
||||
const { isRoomsFolder, isArchiveFolder } = treeFoldersStore;
|
||||
const { isLoading } = clientLoadingStore;
|
||||
|
||||
const filesLength = filesList.length;
|
||||
const isRooms = isRoomsFolder || isArchiveFolder;
|
||||
const { isRoomsFolder, isArchiveFolder } = treeFoldersStore;
|
||||
|
||||
return {
|
||||
filesList,
|
||||
hasMoreFiles,
|
||||
filterTotal: isRooms ? roomsFilterTotal : filterTotal,
|
||||
fetchMoreFiles,
|
||||
filesLength,
|
||||
getCountTilesInRow,
|
||||
isLoading,
|
||||
};
|
||||
})(observer(InfiniteGrid));
|
||||
const filesLength = filesList.length;
|
||||
const isRooms = isRoomsFolder || isArchiveFolder;
|
||||
|
||||
return {
|
||||
filesList,
|
||||
hasMoreFiles,
|
||||
filterTotal: isRooms ? roomsFilterTotal : filterTotal,
|
||||
fetchMoreFiles,
|
||||
filesLength,
|
||||
getCountTilesInRow,
|
||||
isLoading,
|
||||
};
|
||||
}
|
||||
)(observer(InfiniteGrid));
|
||||
|
@ -278,7 +278,7 @@ TileContainer.defaultProps = {
|
||||
|
||||
export default inject(({ auth, filesStore, treeFoldersStore }) => {
|
||||
const { personal } = auth.settingsStore;
|
||||
const { filter, setIsLoading } = filesStore;
|
||||
const { filter } = filesStore;
|
||||
const { isFavoritesFolder, isRecentFolder } = treeFoldersStore;
|
||||
|
||||
const isDesc = filter?.sortOrder === "desc";
|
||||
@ -286,7 +286,6 @@ export default inject(({ auth, filesStore, treeFoldersStore }) => {
|
||||
return {
|
||||
personal,
|
||||
|
||||
setIsLoading,
|
||||
isFavoritesFolder,
|
||||
isRecentFolder,
|
||||
isDesc,
|
||||
|
@ -41,12 +41,10 @@ const SectionBodyContent = (props) => {
|
||||
filesList,
|
||||
uploaded,
|
||||
onClickBack,
|
||||
isLoading,
|
||||
|
||||
movingInProgress,
|
||||
} = props;
|
||||
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
return () => window?.getSelection()?.removeAllRanges();
|
||||
}, []);
|
||||
@ -310,14 +308,14 @@ export default inject(
|
||||
scrollToItem,
|
||||
setScrollToItem,
|
||||
filesList,
|
||||
isLoading,
|
||||
|
||||
movingInProgress,
|
||||
} = filesStore;
|
||||
return {
|
||||
dragging,
|
||||
startDrag,
|
||||
setStartDrag,
|
||||
isLoading,
|
||||
|
||||
isEmptyFilesList,
|
||||
setDragging,
|
||||
folderId: selectedFolderStore.id,
|
||||
@ -341,6 +339,6 @@ export default inject(
|
||||
}
|
||||
)(
|
||||
withTranslation(["Files", "Common", "Translations"])(
|
||||
withHotkeys(observer(SectionBodyContent))
|
||||
withHotkeys(withLoader(observer(SectionBodyContent))())
|
||||
)
|
||||
);
|
||||
|
@ -39,7 +39,6 @@ import {
|
||||
import ViewRowsReactSvgUrl from "PUBLIC_DIR/images/view-rows.react.svg?url";
|
||||
import ViewTilesReactSvgUrl from "PUBLIC_DIR/images/view-tiles.react.svg?url";
|
||||
|
||||
import { showLoader, hideLoader } from "./FilterUtils";
|
||||
import { getRoomInfo } from "@docspace/common/api/rooms";
|
||||
|
||||
const getAccountLoginType = (filterValues) => {
|
||||
@ -246,6 +245,7 @@ const SectionFilterContent = ({
|
||||
groups,
|
||||
|
||||
accountsFilter,
|
||||
showFilterLoader,
|
||||
}) => {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
@ -1986,6 +1986,8 @@ const SectionFilterContent = ({
|
||||
}
|
||||
};
|
||||
|
||||
if (showFilterLoader) return <Loaders.Filter />;
|
||||
|
||||
return (
|
||||
<FilterInput
|
||||
t={t}
|
||||
@ -2025,7 +2027,7 @@ export default inject(
|
||||
auth,
|
||||
filesStore,
|
||||
treeFoldersStore,
|
||||
|
||||
clientLoadingStore,
|
||||
tagsStore,
|
||||
peopleStore,
|
||||
}) => {
|
||||
@ -2033,7 +2035,7 @@ export default inject(
|
||||
filter,
|
||||
|
||||
roomsFilter,
|
||||
setIsLoading,
|
||||
|
||||
setViewAs,
|
||||
viewAs,
|
||||
createThumbnails,
|
||||
@ -2090,7 +2092,8 @@ export default inject(
|
||||
isTrash,
|
||||
isArchiveFolder,
|
||||
|
||||
setIsLoading,
|
||||
setIsLoading: clientLoadingStore.setIsSectionBodyLoading,
|
||||
showFilterLoader: clientLoadingStore.showFilterLoader,
|
||||
|
||||
fetchTags,
|
||||
setViewAs,
|
||||
@ -2129,6 +2132,6 @@ export default inject(
|
||||
"PeopleTranslations",
|
||||
"ConnectDialog",
|
||||
"SmartBanner",
|
||||
])(withLoader(observer(SectionFilterContent))(<Loaders.Filter />))
|
||||
])(observer(SectionFilterContent))
|
||||
)
|
||||
);
|
||||
|
@ -124,7 +124,7 @@ const SectionHeaderContent = (props) => {
|
||||
isInfoPanelVisible,
|
||||
isRootFolder,
|
||||
title,
|
||||
|
||||
showHeaderLoader,
|
||||
isDesktop,
|
||||
isTabletView,
|
||||
personal,
|
||||
@ -199,9 +199,7 @@ const SectionHeaderContent = (props) => {
|
||||
isAdmin,
|
||||
setInvitePanelOptions,
|
||||
isEmptyPage,
|
||||
pathParts,
|
||||
|
||||
clearFiles,
|
||||
emptyTrashInProgress,
|
||||
isLoading,
|
||||
} = props;
|
||||
@ -858,6 +856,8 @@ const SectionHeaderContent = (props) => {
|
||||
|
||||
const isCurrentRoom = isLoading && stateIsRoom ? stateIsRoom : isRoom;
|
||||
|
||||
if (showHeaderLoader) return <Loaders.SectionHeader />;
|
||||
|
||||
return (
|
||||
<Consumer key="header">
|
||||
{(context) => (
|
||||
@ -929,7 +929,7 @@ export default inject(
|
||||
treeFoldersStore,
|
||||
filesActionsStore,
|
||||
settingsStore,
|
||||
|
||||
clientLoadingStore,
|
||||
contextOptionsStore,
|
||||
}) => {
|
||||
const { isOwner, isAdmin } = auth.userStore.user;
|
||||
@ -947,7 +947,6 @@ export default inject(
|
||||
isEmptyFilesList,
|
||||
getFolderInfo,
|
||||
setBufferSelection,
|
||||
setIsLoading,
|
||||
|
||||
activeFiles,
|
||||
activeFolders,
|
||||
@ -958,10 +957,20 @@ export default inject(
|
||||
isEmptyPage,
|
||||
|
||||
clearFiles,
|
||||
|
||||
isLoading,
|
||||
} = filesStore;
|
||||
|
||||
const {
|
||||
setIsSectionBodyLoading,
|
||||
setIsSectionFilterLoading,
|
||||
showHeaderLoader,
|
||||
isLoading,
|
||||
} = clientLoadingStore;
|
||||
|
||||
const setIsLoading = (param) => {
|
||||
setIsSectionBodyLoading(param);
|
||||
setIsSectionFilterLoading(param);
|
||||
};
|
||||
|
||||
const {
|
||||
setSharingPanelVisible,
|
||||
setMoveToPanelVisible,
|
||||
@ -1049,7 +1058,7 @@ export default inject(
|
||||
setInviteUsersWarningDialogVisible,
|
||||
showText: auth.settingsStore.showText,
|
||||
isDesktop: auth.settingsStore.isDesktopClient,
|
||||
|
||||
showHeaderLoader,
|
||||
isLoading,
|
||||
isRootFolder: pathParts?.length === 1,
|
||||
isPersonalRoom,
|
||||
@ -1154,5 +1163,5 @@ export default inject(
|
||||
"People",
|
||||
"PeopleTranslations",
|
||||
"ChangeUserTypeDialog",
|
||||
])(withLoader(observer(SectionHeaderContent))(<Loaders.SectionHeader />))
|
||||
])(observer(SectionHeaderContent))
|
||||
);
|
||||
|
@ -34,8 +34,8 @@ const SettingsView = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth, filesStore, settingsStore }) => {
|
||||
const { isLoading } = filesStore;
|
||||
export default inject(({ auth, clientLoadingStore, settingsStore }) => {
|
||||
const { isLoading } = clientLoadingStore;
|
||||
|
||||
const { isLoadedSettingsTree } = settingsStore;
|
||||
|
||||
|
@ -36,7 +36,7 @@ const PureHome = (props) => {
|
||||
|
||||
//homepage,
|
||||
setIsLoading,
|
||||
setFirstLoad,
|
||||
|
||||
setToPreviewFile,
|
||||
playlist,
|
||||
|
||||
@ -108,6 +108,8 @@ const PureHome = (props) => {
|
||||
fetchPeople,
|
||||
setSelectedNode,
|
||||
onClickBack,
|
||||
|
||||
showFilterLoader,
|
||||
} = props;
|
||||
|
||||
const location = useLocation();
|
||||
@ -125,7 +127,6 @@ const PureHome = (props) => {
|
||||
fetchFiles,
|
||||
fetchRooms,
|
||||
setIsLoading,
|
||||
setFirstLoad,
|
||||
|
||||
isAccountsPage,
|
||||
isSettingsPage,
|
||||
@ -167,14 +168,13 @@ const PureHome = (props) => {
|
||||
location,
|
||||
|
||||
setIsLoading,
|
||||
setFirstLoad,
|
||||
|
||||
setSelectedNode,
|
||||
fetchPeople,
|
||||
setPortalTariff,
|
||||
});
|
||||
|
||||
useSettings({ t, isSettingsPage, setFirstLoad, setIsLoading });
|
||||
useSettings({ t, isSettingsPage, setIsLoading });
|
||||
|
||||
useSDK({
|
||||
frameConfig,
|
||||
@ -264,7 +264,8 @@ const PureHome = (props) => {
|
||||
</Section.SectionHeader>
|
||||
)}
|
||||
|
||||
{((!isEmptyPage && !isErrorRoomNotAvailable) || isAccountsPage) &&
|
||||
{(((!isEmptyPage || showFilterLoader) && !isErrorRoomNotAvailable) ||
|
||||
isAccountsPage) &&
|
||||
!isSettingsPage && (
|
||||
<Section.SectionFilter>
|
||||
{isFrame ? (
|
||||
@ -309,6 +310,7 @@ export default inject(
|
||||
filesActionsStore,
|
||||
oformsStore,
|
||||
selectedFolderStore,
|
||||
clientLoadingStore,
|
||||
}) => {
|
||||
const { setSelectedFolder } = selectedFolderStore;
|
||||
const {
|
||||
@ -316,17 +318,30 @@ export default inject(
|
||||
primaryProgressDataStore,
|
||||
clearUploadedFilesHistory,
|
||||
} = uploadDataStore;
|
||||
|
||||
const {
|
||||
firstLoad,
|
||||
setFirstLoad,
|
||||
|
||||
setIsSectionBodyLoading,
|
||||
setIsSectionFilterLoading,
|
||||
isLoading,
|
||||
|
||||
showFilterLoader,
|
||||
} = clientLoadingStore;
|
||||
|
||||
const setIsLoading = (param) => {
|
||||
setIsSectionBodyLoading(param);
|
||||
setIsSectionFilterLoading(param);
|
||||
};
|
||||
|
||||
const {
|
||||
fetchFiles,
|
||||
fetchRooms,
|
||||
|
||||
selection,
|
||||
dragging,
|
||||
setDragging,
|
||||
setIsLoading,
|
||||
isLoading,
|
||||
|
||||
viewAs,
|
||||
getFileInfo,
|
||||
setIsUpdatingRowItem,
|
||||
@ -335,9 +350,6 @@ export default inject(
|
||||
files,
|
||||
filesList,
|
||||
|
||||
setFolders,
|
||||
setFiles,
|
||||
|
||||
createFile,
|
||||
createFolder,
|
||||
createRoom,
|
||||
@ -356,7 +368,6 @@ export default inject(
|
||||
isRecycleBinFolder,
|
||||
isPrivacyFolder,
|
||||
|
||||
expandedKeys,
|
||||
setExpandedKeys,
|
||||
isRoomsFolder,
|
||||
isArchiveFolder,
|
||||
@ -455,7 +466,7 @@ export default inject(
|
||||
disableDrag,
|
||||
|
||||
setExpandedKeys,
|
||||
setFirstLoad,
|
||||
|
||||
setDragging,
|
||||
setIsLoading,
|
||||
fetchFiles,
|
||||
@ -499,9 +510,8 @@ export default inject(
|
||||
fetchPeople,
|
||||
setSelectedNode,
|
||||
onClickBack,
|
||||
setSelectedFolder,
|
||||
setFolders,
|
||||
setFiles,
|
||||
|
||||
showFilterLoader,
|
||||
};
|
||||
}
|
||||
)(observer(Home));
|
||||
|
@ -8,11 +8,10 @@ import SectionBodyContent from "./Section/Body/index";
|
||||
import SectionHeaderContent from "./Section/Header/index";
|
||||
|
||||
const NotificationComponent = (props) => {
|
||||
const { setSelectedNode, setFirstLoad } = props;
|
||||
const { setSelectedNode } = props;
|
||||
const { t, ready } = useTranslation("Notifications");
|
||||
|
||||
useEffect(() => {
|
||||
setFirstLoad(false);
|
||||
setSelectedNode(["accounts"]);
|
||||
}, []);
|
||||
|
||||
@ -29,11 +28,10 @@ const NotificationComponent = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ treeFoldersStore, filesStore }) => {
|
||||
export default inject(({ treeFoldersStore, clientLoadingStore }) => {
|
||||
const { setSelectedNode } = treeFoldersStore;
|
||||
const { setFirstLoad } = filesStore;
|
||||
|
||||
return {
|
||||
setFirstLoad,
|
||||
setSelectedNode,
|
||||
};
|
||||
})(observer(NotificationComponent));
|
||||
|
@ -28,11 +28,9 @@ class Profile extends React.Component {
|
||||
isVisitor,
|
||||
selectedTreeNode,
|
||||
setSelectedNode,
|
||||
setFirstLoadGlobal,
|
||||
} = this.props;
|
||||
const userId = "@self";
|
||||
|
||||
setFirstLoadGlobal(false);
|
||||
setIsEditTargetUser(false);
|
||||
|
||||
isVisitor
|
||||
@ -111,31 +109,32 @@ Profile.propTypes = {
|
||||
language: PropTypes.string,
|
||||
};
|
||||
|
||||
export default inject(({ auth, peopleStore, filesStore, treeFoldersStore }) => {
|
||||
const { setDocumentTitle, language } = auth;
|
||||
const { setFirstLoad: setFirstLoadGlobal } = filesStore;
|
||||
const { targetUserStore } = peopleStore;
|
||||
const {
|
||||
getTargetUser: fetchProfile,
|
||||
targetUser: profile,
|
||||
isEditTargetUser,
|
||||
setIsEditTargetUser,
|
||||
} = targetUserStore;
|
||||
export default inject(
|
||||
({ auth, peopleStore, clientLoadingStore, treeFoldersStore }) => {
|
||||
const { setDocumentTitle, language } = auth;
|
||||
|
||||
const { selectedTreeNode, setSelectedNode } = treeFoldersStore;
|
||||
return {
|
||||
setFirstLoadGlobal,
|
||||
setDocumentTitle,
|
||||
language,
|
||||
fetchProfile,
|
||||
profile,
|
||||
const { targetUserStore } = peopleStore;
|
||||
const {
|
||||
getTargetUser: fetchProfile,
|
||||
targetUser: profile,
|
||||
isEditTargetUser,
|
||||
setIsEditTargetUser,
|
||||
} = targetUserStore;
|
||||
|
||||
isEditTargetUser,
|
||||
setIsEditTargetUser,
|
||||
const { selectedTreeNode, setSelectedNode } = treeFoldersStore;
|
||||
return {
|
||||
setDocumentTitle,
|
||||
language,
|
||||
fetchProfile,
|
||||
profile,
|
||||
|
||||
showCatalog: auth.settingsStore.showCatalog,
|
||||
selectedTreeNode,
|
||||
setSelectedNode,
|
||||
isVisitor: auth.userStore.user.isVisitor,
|
||||
};
|
||||
})(observer(withTranslation(["Profile", "Common"])(withCultureNames(Profile))));
|
||||
isEditTargetUser,
|
||||
setIsEditTargetUser,
|
||||
|
||||
showCatalog: auth.settingsStore.showCatalog,
|
||||
selectedTreeNode,
|
||||
setSelectedNode,
|
||||
isVisitor: auth.userStore.user.isVisitor,
|
||||
};
|
||||
}
|
||||
)(observer(withTranslation(["Profile", "Common"])(withCultureNames(Profile))));
|
||||
|
@ -137,14 +137,14 @@ class SectionBodyContent extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
export default inject(({ auth, filesStore, versionHistoryStore }) => {
|
||||
const { setFirstLoad, setIsLoading, isLoading } = filesStore;
|
||||
export default inject(({ auth, versionHistoryStore, clientLoadingStore }) => {
|
||||
const { setFirstLoad, isLoading } = clientLoadingStore;
|
||||
const { versions, fetchFileVersions, fileId, fileSecurity } =
|
||||
versionHistoryStore;
|
||||
|
||||
return {
|
||||
culture: auth.settingsStore.culture,
|
||||
isLoading,
|
||||
isLoading: isLoading,
|
||||
versions,
|
||||
fileId,
|
||||
fileSecurity,
|
||||
|
@ -44,18 +44,21 @@ const VersionHistory = withTranslation("VersionHistory")(PureVersionHistory);
|
||||
|
||||
VersionHistory.propTypes = {};
|
||||
|
||||
export default inject(({ auth, filesStore, versionHistoryStore }) => {
|
||||
const { filter, isLoading } = filesStore;
|
||||
const { setIsVerHistoryPanel, versions, showProgressBar } =
|
||||
versionHistoryStore;
|
||||
export default inject(
|
||||
({ auth, filesStore, clientLoadingStore, versionHistoryStore }) => {
|
||||
const { filter } = filesStore;
|
||||
const { isLoading } = clientLoadingStore;
|
||||
const { setIsVerHistoryPanel, versions, showProgressBar } =
|
||||
versionHistoryStore;
|
||||
|
||||
return {
|
||||
isTabletView: auth.settingsStore.isTabletView,
|
||||
isLoading,
|
||||
filter,
|
||||
versions,
|
||||
showProgressBar,
|
||||
return {
|
||||
isTabletView: auth.settingsStore.isTabletView,
|
||||
isLoading,
|
||||
filter,
|
||||
versions,
|
||||
showProgressBar,
|
||||
|
||||
setIsVerHistoryPanel,
|
||||
};
|
||||
})(observer(VersionHistory));
|
||||
setIsVerHistoryPanel,
|
||||
};
|
||||
}
|
||||
)(observer(VersionHistory));
|
||||
|
154
packages/client/src/store/ClientLoadingStore.js
Normal file
154
packages/client/src/store/ClientLoadingStore.js
Normal file
@ -0,0 +1,154 @@
|
||||
import { makeAutoObservable } from "mobx";
|
||||
|
||||
class ClientLoadingStore {
|
||||
isLoaded = false;
|
||||
firstLoad = true;
|
||||
|
||||
isArticleLoading = true;
|
||||
|
||||
isSectionHeaderLoading = false;
|
||||
isSectionFilterLoading = false;
|
||||
isSectionBodyLoading = false;
|
||||
isProfileLoaded = false;
|
||||
|
||||
// showArticleLoader = true;
|
||||
// showHeaderLoader = true;
|
||||
// showFilterLoader = true;
|
||||
// showBodyLoader = true;
|
||||
|
||||
sectionHeaderTimer = null;
|
||||
sectionFilterTimer = null;
|
||||
sectionBodyTimer = null;
|
||||
|
||||
pendingSectionLoaders = {
|
||||
header: false,
|
||||
filter: false,
|
||||
body: false,
|
||||
};
|
||||
|
||||
constructor() {
|
||||
makeAutoObservable(this);
|
||||
}
|
||||
|
||||
setIsLoaded = (isLoaded) => {
|
||||
this.isLoaded = isLoaded;
|
||||
};
|
||||
|
||||
setFirstLoad = (firstLoad) => {
|
||||
this.firstLoad = firstLoad;
|
||||
};
|
||||
|
||||
setIsArticleLoading = (isArticleLoading) => {
|
||||
this.isArticleLoading = isArticleLoading;
|
||||
};
|
||||
|
||||
setIsSectionHeaderLoading = (isSectionHeaderLoading, withTimer = true) => {
|
||||
this.pendingSectionLoaders.header = isSectionHeaderLoading;
|
||||
if (isSectionHeaderLoading) {
|
||||
if (this.sectionHeaderTimer) {
|
||||
return;
|
||||
}
|
||||
if (withTimer) {
|
||||
return (this.sectionHeaderTimer = setTimeout(() => {
|
||||
this.isSectionHeaderLoading = isSectionHeaderLoading;
|
||||
}, 500));
|
||||
}
|
||||
this.isSectionHeaderLoading = isSectionHeaderLoading;
|
||||
} else {
|
||||
if (this.sectionHeaderTimer) {
|
||||
clearTimeout(this.sectionHeaderTimer);
|
||||
this.sectionHeaderTimer = null;
|
||||
}
|
||||
this.isSectionHeaderLoading = false;
|
||||
}
|
||||
};
|
||||
|
||||
setIsSectionFilterLoading = (isSectionFilterLoading, withTimer = true) => {
|
||||
this.pendingSectionLoaders.filter = isSectionFilterLoading;
|
||||
if (isSectionFilterLoading) {
|
||||
if (this.sectionFilterTimer) {
|
||||
return;
|
||||
}
|
||||
if (withTimer) {
|
||||
return (this.sectionFilterTimer = setTimeout(() => {
|
||||
this.isSectionFilterLoading = isSectionFilterLoading;
|
||||
}, 500));
|
||||
}
|
||||
this.isSectionFilterLoading = isSectionFilterLoading;
|
||||
} else {
|
||||
if (this.sectionFilterTimer) {
|
||||
clearTimeout(this.sectionFilterTimer);
|
||||
this.sectionFilterTimer = null;
|
||||
}
|
||||
this.isSectionFilterLoading = false;
|
||||
}
|
||||
};
|
||||
|
||||
setIsSectionBodyLoading = (isSectionBodyLoading, withTimer = true) => {
|
||||
this.pendingSectionLoaders.body = isSectionBodyLoading;
|
||||
if (isSectionBodyLoading) {
|
||||
if (this.sectionBodyTimer) {
|
||||
return;
|
||||
}
|
||||
if (withTimer) {
|
||||
return (this.sectionBodyTimer = setTimeout(() => {
|
||||
this.isSectionBodyLoading = isSectionBodyLoading;
|
||||
}, 500));
|
||||
}
|
||||
this.isSectionBodyLoading = isSectionBodyLoading;
|
||||
} else {
|
||||
if (this.sectionBodyTimer) {
|
||||
clearTimeout(this.sectionBodyTimer);
|
||||
this.sectionBodyTimer = null;
|
||||
}
|
||||
this.isSectionBodyLoading = false;
|
||||
}
|
||||
};
|
||||
|
||||
setIsProfileLoaded = (isProfileLoaded) => {
|
||||
this.isProfileLoaded = isProfileLoaded;
|
||||
};
|
||||
|
||||
hideLoaders = () => {
|
||||
this.clearTimers();
|
||||
this.showHeaderLoader = false;
|
||||
this.showFilterLoader = false;
|
||||
this.showBodyLoader = false;
|
||||
this.isSectionHeaderLoading = false;
|
||||
this.isSectionFilterLoading = false;
|
||||
this.isSectionBodyLoading = false;
|
||||
};
|
||||
|
||||
clearTimers = () => {
|
||||
clearTimeout(this.sectionHeaderTimer);
|
||||
clearTimeout(this.sectionFilterTimer);
|
||||
clearTimeout(this.sectionBodyTimer);
|
||||
};
|
||||
|
||||
get isLoading() {
|
||||
return (
|
||||
this.isArticleLoading ||
|
||||
this.pendingSectionLoaders.header ||
|
||||
this.pendingSectionLoaders.filter ||
|
||||
this.pendingSectionLoaders.body
|
||||
);
|
||||
}
|
||||
|
||||
get showArticleLoader() {
|
||||
return this.isArticleLoading;
|
||||
}
|
||||
|
||||
get showHeaderLoader() {
|
||||
return this.isSectionHeaderLoading || this.isArticleLoading;
|
||||
}
|
||||
|
||||
get showFilterLoader() {
|
||||
return this.isSectionFilterLoading || this.showHeaderLoader;
|
||||
}
|
||||
|
||||
get showBodyLoader() {
|
||||
return this.isSectionBodyLoading || this.showFilterLoader;
|
||||
}
|
||||
}
|
||||
|
||||
export default ClientLoadingStore;
|
@ -28,7 +28,8 @@ class CreateEditRoomStore {
|
||||
thirdPartyStore,
|
||||
settingsStore,
|
||||
infoPanelStore,
|
||||
currentQuotaStore
|
||||
currentQuotaStore,
|
||||
clientLoadingStore
|
||||
) {
|
||||
makeAutoObservable(this);
|
||||
|
||||
@ -40,6 +41,7 @@ class CreateEditRoomStore {
|
||||
this.settingsStore = settingsStore;
|
||||
this.infoPanelStore = infoPanelStore;
|
||||
this.currentQuotaStore = currentQuotaStore;
|
||||
this.clientLoadingStore = clientLoadingStore;
|
||||
}
|
||||
|
||||
setRoomParams = (roomParams) => {
|
||||
@ -160,9 +162,15 @@ class CreateEditRoomStore {
|
||||
};
|
||||
|
||||
onOpenNewRoom = async (room) => {
|
||||
const { setIsLoading, clearFiles } = this.filesStore;
|
||||
const { setIsSectionBodyLoading, setIsSectionFilterLoading } =
|
||||
this.clientLoadingStore;
|
||||
const { setView, setIsVisible } = this.infoPanelStore;
|
||||
|
||||
const setIsLoading = (param) => {
|
||||
setIsSectionBodyLoading(param);
|
||||
setIsSectionFilterLoading(param);
|
||||
};
|
||||
|
||||
setView("info_members");
|
||||
|
||||
const state = {
|
||||
|
@ -61,6 +61,7 @@ class FilesActionStore {
|
||||
dialogsStore;
|
||||
mediaViewerDataStore;
|
||||
accessRightsStore;
|
||||
clientLoadingStore;
|
||||
|
||||
isBulkDownload = false;
|
||||
isLoadedSearchFiles = false;
|
||||
@ -76,7 +77,8 @@ class FilesActionStore {
|
||||
settingsStore,
|
||||
dialogsStore,
|
||||
mediaViewerDataStore,
|
||||
accessRightsStore
|
||||
accessRightsStore,
|
||||
clientLoadingStore
|
||||
) {
|
||||
makeAutoObservable(this);
|
||||
this.authStore = authStore;
|
||||
@ -88,6 +90,7 @@ class FilesActionStore {
|
||||
this.dialogsStore = dialogsStore;
|
||||
this.mediaViewerDataStore = mediaViewerDataStore;
|
||||
this.accessRightsStore = accessRightsStore;
|
||||
this.clientLoadingStore = clientLoadingStore;
|
||||
}
|
||||
|
||||
setIsBulkDownload = (isBulkDownload) => {
|
||||
@ -1192,7 +1195,13 @@ class FilesActionStore {
|
||||
};
|
||||
|
||||
selectTag = (tag) => {
|
||||
const { roomsFilter, setIsLoading } = this.filesStore;
|
||||
const { roomsFilter } = this.filesStore;
|
||||
|
||||
const { setIsSectionBodyLoading } = this.clientLoadingStore;
|
||||
|
||||
const setIsLoading = (param) => {
|
||||
setIsSectionBodyLoading(param);
|
||||
};
|
||||
|
||||
const newFilter = roomsFilter.clone();
|
||||
|
||||
@ -1222,7 +1231,13 @@ class FilesActionStore {
|
||||
};
|
||||
|
||||
selectOption = ({ option, value }) => {
|
||||
const { roomsFilter, setIsLoading } = this.filesStore;
|
||||
const { roomsFilter } = this.filesStore;
|
||||
|
||||
const { setIsSectionBodyLoading } = this.clientLoadingStore;
|
||||
|
||||
const setIsLoading = (param) => {
|
||||
setIsSectionBodyLoading(param);
|
||||
};
|
||||
|
||||
const newFilter = roomsFilter.clone();
|
||||
const tags = newFilter.tags ? [...newFilter.tags] : [];
|
||||
@ -1267,6 +1282,14 @@ class FilesActionStore {
|
||||
openLocationAction = async (item) => {
|
||||
this.filesStore.setBufferSelection(null);
|
||||
|
||||
const { setIsSectionBodyLoading, setIsSectionFilterLoading } =
|
||||
this.clientLoadingStore;
|
||||
|
||||
const setIsLoading = (param) => {
|
||||
setIsSectionBodyLoading(param);
|
||||
setIsSectionFilterLoading(param);
|
||||
};
|
||||
|
||||
const { id, isRoom, title, rootFolderType } = item;
|
||||
const categoryType = getCategoryTypeByFolderType(rootFolderType, id);
|
||||
|
||||
@ -1277,16 +1300,21 @@ class FilesActionStore {
|
||||
|
||||
const url = getCategoryUrl(categoryType, id);
|
||||
|
||||
this.filesStore.setIsLoading(true);
|
||||
|
||||
window.DocSpace.navigate(`${url}?${filter.toUrlParams()}`, { state });
|
||||
};
|
||||
|
||||
checkAndOpenLocationAction = async (item) => {
|
||||
const { setIsLoading, clearFiles, categoryType } = this.filesStore;
|
||||
const { categoryType } = this.filesStore;
|
||||
const { myRoomsId, myFolderId, archiveRoomsId, recycleBinFolderId } =
|
||||
this.treeFoldersStore;
|
||||
const { rootFolderType } = this.selectedFolderStore;
|
||||
const { setIsSectionBodyLoading, setIsSectionFilterLoading } =
|
||||
this.clientLoadingStore;
|
||||
|
||||
const setIsLoading = (param) => {
|
||||
setIsSectionBodyLoading(param);
|
||||
setIsSectionFilterLoading(param);
|
||||
};
|
||||
|
||||
const { ExtraLocationTitle, ExtraLocation, fileExst } = item;
|
||||
|
||||
@ -1980,17 +2008,21 @@ class FilesActionStore {
|
||||
onMarkAsRead = (item) => this.markAsRead([], [`${item.id}`], item);
|
||||
|
||||
openFileAction = (item) => {
|
||||
const {
|
||||
isLoading,
|
||||
setIsLoading,
|
||||
openDocEditor,
|
||||
isPrivacyFolder,
|
||||
clearFiles,
|
||||
} = this.filesStore;
|
||||
const { openDocEditor, isPrivacyFolder } = this.filesStore;
|
||||
|
||||
const { isLoading } = this.clientLoadingStore;
|
||||
const { isRecycleBinFolder } = this.treeFoldersStore;
|
||||
const { setMediaViewerData } = this.mediaViewerDataStore;
|
||||
const { setConvertDialogVisible, setConvertItem } = this.dialogsStore;
|
||||
|
||||
const { setIsSectionBodyLoading, setIsSectionFilterLoading } =
|
||||
this.clientLoadingStore;
|
||||
|
||||
const setIsLoading = (param) => {
|
||||
setIsSectionBodyLoading(param);
|
||||
setIsSectionFilterLoading(param);
|
||||
};
|
||||
|
||||
const isMediaOrImage =
|
||||
item.viewAccessability?.ImageView || item.viewAccessability?.MediaView;
|
||||
const canConvert = item.viewAccessability?.Convert;
|
||||
@ -2061,7 +2093,15 @@ class FilesActionStore {
|
||||
onClickBack = () => {
|
||||
const { roomType } = this.selectedFolderStore;
|
||||
const { setSelectedNode } = this.treeFoldersStore;
|
||||
const { clearFiles, setIsLoading } = this.filesStore;
|
||||
const { clearFiles } = this.filesStore;
|
||||
|
||||
const { setIsSectionBodyLoading, setIsSectionFilterLoading } =
|
||||
this.clientLoadingStore;
|
||||
|
||||
const setIsLoading = (param) => {
|
||||
setIsSectionBodyLoading(param);
|
||||
setIsSectionFilterLoading(param);
|
||||
};
|
||||
|
||||
const categoryType = getCategoryType(location);
|
||||
const isRoom = !!roomType;
|
||||
@ -2117,7 +2157,13 @@ class FilesActionStore {
|
||||
};
|
||||
|
||||
moveToRoomsPage = () => {
|
||||
const { clearFiles, setIsLoading } = this.filesStore;
|
||||
const { setIsSectionBodyLoading, setIsSectionFilterLoading } =
|
||||
this.clientLoadingStore;
|
||||
|
||||
const setIsLoading = (param) => {
|
||||
setIsSectionBodyLoading(param);
|
||||
setIsSectionFilterLoading(param);
|
||||
};
|
||||
|
||||
const categoryType = getCategoryType(location);
|
||||
|
||||
@ -2144,7 +2190,13 @@ class FilesActionStore {
|
||||
};
|
||||
|
||||
backToParentFolder = () => {
|
||||
const { setIsLoading, clearFiles } = this.filesStore;
|
||||
const { setIsSectionBodyLoading, setIsSectionFilterLoading } =
|
||||
this.clientLoadingStore;
|
||||
|
||||
const setIsLoading = (param) => {
|
||||
setIsSectionBodyLoading(param);
|
||||
setIsSectionFilterLoading(param);
|
||||
};
|
||||
|
||||
let id = this.selectedFolderStore.parentId;
|
||||
|
||||
|
@ -51,12 +51,10 @@ class FilesStore {
|
||||
treeFoldersStore;
|
||||
filesSettingsStore;
|
||||
thirdPartyStore;
|
||||
clientLoadingStore;
|
||||
|
||||
accessRightsStore;
|
||||
|
||||
isLoaded = false;
|
||||
isLoading = false;
|
||||
|
||||
viewAs =
|
||||
isMobile && storageViewAs !== "tile" ? "row" : storageViewAs || "table";
|
||||
|
||||
@ -71,7 +69,6 @@ class FilesStore {
|
||||
tooltipPageY = 0;
|
||||
startDrag = false;
|
||||
|
||||
firstLoad = true;
|
||||
alreadyFetchingRooms = false;
|
||||
|
||||
files = [];
|
||||
@ -138,7 +135,8 @@ class FilesStore {
|
||||
treeFoldersStore,
|
||||
filesSettingsStore,
|
||||
thirdPartyStore,
|
||||
accessRightsStore
|
||||
accessRightsStore,
|
||||
clientLoadingStore
|
||||
) {
|
||||
const pathname = window.location.pathname.toLowerCase();
|
||||
this.isEditor = pathname.indexOf("doceditor") !== -1;
|
||||
@ -151,6 +149,7 @@ class FilesStore {
|
||||
this.filesSettingsStore = filesSettingsStore;
|
||||
this.thirdPartyStore = thirdPartyStore;
|
||||
this.accessRightsStore = accessRightsStore;
|
||||
this.clientLoadingStore = clientLoadingStore;
|
||||
|
||||
this.roomsController = new AbortController();
|
||||
this.filesController = new AbortController();
|
||||
@ -159,7 +158,7 @@ class FilesStore {
|
||||
socketHelper.on("s:modify-folder", async (opt) => {
|
||||
console.log("[WS] s:modify-folder", opt);
|
||||
|
||||
if (!(this.isLoading || this.operationAction))
|
||||
if (!(this.clientLoadingStore.isLoading || this.operationAction))
|
||||
switch (opt?.cmd) {
|
||||
case "create":
|
||||
this.wsModifyFolderCreate(opt);
|
||||
@ -190,7 +189,7 @@ class FilesStore {
|
||||
});
|
||||
|
||||
socketHelper.on("refresh-folder", (id) => {
|
||||
if (!id || this.isLoading) return;
|
||||
if (!id || this.clientLoadingStore.isLoading) return;
|
||||
|
||||
//console.log(
|
||||
// `selected folder id ${this.selectedFolderStore.id} an changed folder id ${id}`
|
||||
@ -606,10 +605,6 @@ class FilesStore {
|
||||
this.activeFolders = activeFolders;
|
||||
};
|
||||
|
||||
setIsLoaded = (isLoaded) => {
|
||||
this.isLoaded = isLoaded;
|
||||
};
|
||||
|
||||
setViewAs = (viewAs) => {
|
||||
this.viewAs = viewAs;
|
||||
localStorage.setItem("viewAs", viewAs);
|
||||
@ -624,10 +619,6 @@ class FilesStore {
|
||||
this.dragging = dragging;
|
||||
};
|
||||
|
||||
setIsLoading = (isLoading) => {
|
||||
this.isLoading = isLoading;
|
||||
};
|
||||
|
||||
setTooltipPosition = (tooltipPageX, tooltipPageY) => {
|
||||
this.tooltipPageX = tooltipPageX;
|
||||
this.tooltipPageY = tooltipPageY;
|
||||
@ -693,7 +684,7 @@ class FilesStore {
|
||||
|
||||
updateTempContent();
|
||||
if (!isAuthenticated) {
|
||||
return this.setIsLoaded(true);
|
||||
return this.clientLoadingStore.setIsLoaded(true);
|
||||
} else {
|
||||
updateTempContent(isAuthenticated);
|
||||
}
|
||||
@ -722,7 +713,12 @@ class FilesStore {
|
||||
}
|
||||
requests.push(getFilesSettings());
|
||||
|
||||
return Promise.all(requests).then(() => this.setIsInit(true));
|
||||
return Promise.all(requests).then(() => {
|
||||
this.clientLoadingStore.setIsArticleLoading(false);
|
||||
this.clientLoadingStore.setFirstLoad(false);
|
||||
|
||||
this.setIsInit(true);
|
||||
});
|
||||
};
|
||||
|
||||
setIsInit = (isInit) => {
|
||||
@ -731,9 +727,12 @@ class FilesStore {
|
||||
|
||||
reset = () => {
|
||||
this.isInit = false;
|
||||
this.isLoaded = false;
|
||||
this.isLoading = false;
|
||||
this.firstLoad = true;
|
||||
this.clientLoadingStore.setIsLoaded(false);
|
||||
this.clientLoadingStore.setIsSectionHeaderLoading(true);
|
||||
this.clientLoadingStore.setIsSectionFilterLoading(true);
|
||||
this.clientLoadingStore.setIsSectionBodyLoading(true);
|
||||
this.clientLoadingStore.setIsArticleLoading(true);
|
||||
this.clientLoadingStore.setFirstLoad(true);
|
||||
|
||||
this.alreadyFetchingRooms = false;
|
||||
|
||||
@ -744,9 +743,6 @@ class FilesStore {
|
||||
this.bufferSelection = null;
|
||||
this.selected = "close";
|
||||
};
|
||||
setFirstLoad = (firstLoad) => {
|
||||
this.firstLoad = firstLoad;
|
||||
};
|
||||
|
||||
setFiles = (files) => {
|
||||
const { socketHelper } = this.authStore.settingsStore;
|
||||
@ -1161,7 +1157,7 @@ class FilesStore {
|
||||
clearSelection = true
|
||||
) => {
|
||||
const { setSelectedNode } = this.treeFoldersStore;
|
||||
if (this.isLoading) {
|
||||
if (this.clientLoadingStore.isLoading) {
|
||||
this.roomsController.abort();
|
||||
this.roomsController = new AbortController();
|
||||
}
|
||||
@ -1333,6 +1329,8 @@ class FilesStore {
|
||||
...{ new: data.new },
|
||||
});
|
||||
|
||||
this.clientLoadingStore.setIsSectionHeaderLoading(false);
|
||||
|
||||
const selectedFolder = {
|
||||
selectedFolder: { ...this.selectedFolderStore },
|
||||
};
|
||||
@ -1404,7 +1402,7 @@ class FilesStore {
|
||||
) => {
|
||||
const { setSelectedNode, roomsFolderId } = this.treeFoldersStore;
|
||||
|
||||
if (this.isLoading) {
|
||||
if (this.clientLoadingStore.isLoading) {
|
||||
this.filesController.abort();
|
||||
this.filesController = new AbortController();
|
||||
}
|
||||
@ -1506,6 +1504,8 @@ class FilesStore {
|
||||
...{ new: data.new },
|
||||
});
|
||||
|
||||
this.clientLoadingStore.setIsSectionHeaderLoading(false);
|
||||
|
||||
const selectedFolder = {
|
||||
selectedFolder: { ...this.selectedFolderStore },
|
||||
};
|
||||
@ -3317,7 +3317,7 @@ class FilesStore {
|
||||
const isRooms = isRoomsFolder || isArchiveFolder;
|
||||
const filterTotal = isRooms ? this.roomsFilter.total : this.filter.total;
|
||||
|
||||
if (this.isLoading) return false;
|
||||
if (this.clientLoadingStore.isLoading) return false;
|
||||
return this.filesList.length < filterTotal;
|
||||
}
|
||||
|
||||
@ -3326,7 +3326,12 @@ class FilesStore {
|
||||
};
|
||||
|
||||
fetchMoreFiles = async () => {
|
||||
if (!this.hasMoreFiles || this.filesIsLoading || this.isLoading) return;
|
||||
if (
|
||||
!this.hasMoreFiles ||
|
||||
this.filesIsLoading ||
|
||||
this.clientLoadingStore.isLoading
|
||||
)
|
||||
return;
|
||||
|
||||
const { isRoomsFolder, isArchiveFolder } = this.treeFoldersStore;
|
||||
|
||||
|
@ -35,8 +35,12 @@ import AccessRightsStore from "./AccessRightsStore";
|
||||
import TableStore from "./TableStore";
|
||||
import CreateEditRoomStore from "./CreateEditRoomStore";
|
||||
|
||||
import ClientLoadingStore from "./ClientLoadingStore";
|
||||
|
||||
const oformsStore = new OformsStore(authStore);
|
||||
|
||||
const clientLoadingStore = new ClientLoadingStore();
|
||||
|
||||
const selectedFolderStore = new SelectedFolderStore(authStore.settingsStore);
|
||||
|
||||
const paymentStore = new PaymentStore();
|
||||
@ -61,7 +65,8 @@ const filesStore = new FilesStore(
|
||||
treeFoldersStore,
|
||||
settingsStore,
|
||||
thirdPartyStore,
|
||||
accessRightsStore
|
||||
accessRightsStore,
|
||||
clientLoadingStore
|
||||
);
|
||||
|
||||
const mediaViewerDataStore = new MediaViewerDataStore(
|
||||
@ -107,7 +112,8 @@ const filesActionsStore = new FilesActionsStore(
|
||||
settingsStore,
|
||||
dialogsStore,
|
||||
mediaViewerDataStore,
|
||||
accessRightsStore
|
||||
accessRightsStore,
|
||||
clientLoadingStore
|
||||
);
|
||||
|
||||
const contextOptionsStore = new ContextOptionsStore(
|
||||
@ -157,7 +163,8 @@ const createEditRoomStore = new CreateEditRoomStore(
|
||||
thirdPartyStore,
|
||||
authStore.settingsStore,
|
||||
authStore.infoPanelStore,
|
||||
authStore.currentQuotaStore
|
||||
authStore.currentQuotaStore,
|
||||
clientLoadingStore
|
||||
);
|
||||
|
||||
const store = {
|
||||
@ -195,6 +202,7 @@ const store = {
|
||||
|
||||
accessRightsStore,
|
||||
createEditRoomStore,
|
||||
clientLoadingStore,
|
||||
};
|
||||
|
||||
export default store;
|
||||
|
@ -145,7 +145,7 @@ StyledArticle.defaultProps = { theme: Base };
|
||||
|
||||
const StyledArticleHeader = styled.div`
|
||||
height: 24px;
|
||||
padding: 24px 21px 21px 20px;
|
||||
padding: 22px 21px 23px 20px;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
@ -46,7 +46,7 @@ const ArticleHeader = ({
|
||||
)}
|
||||
|
||||
{!isTabletView && isBurgerLoading ? (
|
||||
<Loaders.ArticleHeader height="28px" width="211px" />
|
||||
<Loaders.ArticleHeader height="24px" width="211px" />
|
||||
) : (
|
||||
<StyledHeading showText={showText} size="large">
|
||||
{isTabletView ? (
|
||||
|
@ -24,7 +24,7 @@ const isDesktopEditors = window["AscDesktopEditor"] !== undefined;
|
||||
class SettingsStore {
|
||||
isLoading = false;
|
||||
isLoaded = false;
|
||||
isBurgerLoading = false;
|
||||
isBurgerLoading = true;
|
||||
|
||||
checkedMaintenance = false;
|
||||
maintenanceExist = false;
|
||||
|
Loading…
Reference in New Issue
Block a user