IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Client: modify loading system

Browse Source
This commit is contained in:
Timofey Boyko 2023-06-05 11:17:34 +03:00
parent c12d8fb8d7
commit e6d6efda5b
50 changed files with 686 additions and 440 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
packages/client/src/Client.jsx
View File

@ -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 />;

51
packages/client/src/HOCs/withLoader.js
View File

@ -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));
};

4
packages/client/src/components/Article/Body/AccountsItem.js
View File

@ -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;

7
packages/client/src/components/Article/Body/Items.js
View File

@ -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 } =

4
packages/client/src/components/Article/Body/SettingsItem.js
View File

@ -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 }) => {

55
packages/client/src/components/Article/Body/index.js
View File

@ -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)));

57
packages/client/src/components/Article/MainButton/index.js
View File

@ -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))
);

10
packages/client/src/components/EmptyContainer/EmptyFilterContainer.js
View File

@ -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,

18
packages/client/src/components/EmptyContainer/EmptyFolderContainer.js
View File

@ -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,

13
packages/client/src/components/EmptyContainer/RoomNoAccessContainer.js
View File

@ -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,

23
packages/client/src/components/EmptyContainer/RootFolderContainer.js
View File

@ -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)));

4
packages/client/src/components/EmptyContainer/index.js
View File

@ -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;

17
packages/client/src/components/FolderTreeBody/index.js
View File

@ -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;

9
packages/client/src/components/GlobalEvents/CreateEvent.js
View File

@ -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,

3
packages/client/src/components/GlobalEvents/CreateRoomEvent.js
View File

@ -79,9 +79,8 @@ const CreateRoomEvent = ({
export default inject(
({
auth,
createEditRoomStore,
filesStore,
tagsStore,
dialogsStore,
settingsStore,

5
packages/client/src/components/GlobalEvents/RenameEvent.js
View File

@ -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,

7
packages/client/src/components/MainBar/index.js
View File

@ -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,

51
packages/client/src/components/panels/ChangeOwnerPanel/index.js
View File

@ -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));

28
packages/client/src/components/panels/NewFilesPanel/index.js
View File

@ -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,
};
}

12
packages/client/src/components/panels/SelectFileInput/index.js
View File

@ -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;

4
packages/client/src/components/panels/SelectFolderInput/index.js
View File

@ -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,

4
packages/client/src/components/panels/VersionHistoryPanel/index.js
View File

@ -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,

2
packages/client/src/pages/Home/Hooks/useAccounts.js
View File

@ -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]);
};

2
packages/client/src/pages/Home/Hooks/useFiles.js
View File

@ -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]);

3
packages/client/src/pages/Home/Hooks/useSettings.js
View File

@ -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]);
};

30
packages/client/src/pages/Home/MediaViewer/index.js
View File

@ -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,

16
packages/client/src/pages/Home/Section/AccountsBody/EmptyScreen.js
View File

@ -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
packages/client/src/pages/Home/Section/AccountsBody/RowView/PeopleRowContainer.js
View File

@ -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,

7
packages/client/src/pages/Home/Section/AccountsBody/TableView/TableContainer.js
View File

@ -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,

6
packages/client/src/pages/Home/Section/AccountsBody/TableView/TableHeader.js
View File

@ -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,

13
packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js
View File

@ -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,

49
packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js
View File

@ -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));

3
packages/client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js
View File

@ -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,

10
packages/client/src/pages/Home/Section/Body/index.js
View File

@ -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))())
)
);

13
packages/client/src/pages/Home/Section/Filter/index.js
View File

@ -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))
)
);

27
packages/client/src/pages/Home/Section/Header/index.js
View File

@ -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))
);

4
packages/client/src/pages/Home/View/Settings.js
View File

@ -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;

42
packages/client/src/pages/Home/index.js
View File

@ -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
packages/client/src/pages/Notifications/index.js
View File

@ -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));

53
packages/client/src/pages/Profile/index.js
View File

@ -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))));

6
packages/client/src/pages/VersionHistory/Section/Body/index.js
View File

@ -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,

29
packages/client/src/pages/VersionHistory/index.js
View File

@ -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
View 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;

12
packages/client/src/store/CreateEditRoomStore.js
View File

@ -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 = {

84
packages/client/src/store/FilesActionsStore.js
View File

@ -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;

59
packages/client/src/store/FilesStore.js
View File

@ -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;

14
packages/client/src/store/index.js
View File

@ -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;

2
packages/common/components/Article/styled-article.js
View File

@ -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;

2
packages/common/components/Article/sub-components/article-header.js
View File

@ -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 ? (

2
packages/common/store/SettingsStore.js
View File

@ -24,7 +24,7 @@ const isDesktopEditors = window["AscDesktopEditor"] !== undefined;
class SettingsStore {
isLoading = false;
isLoaded = false;
isBurgerLoading = false;
isBurgerLoading = true;
checkedMaintenance = false;
maintenanceExist = false;