diff --git a/products/ASC.Files/Client/src/components/panels/OperationsDialog/index.js b/products/ASC.Files/Client/src/components/panels/OperationsDialog/index.js index da4872e3c7..fba6d05ea8 100644 --- a/products/ASC.Files/Client/src/components/panels/OperationsDialog/index.js +++ b/products/ASC.Files/Client/src/components/panels/OperationsDialog/index.js @@ -10,7 +10,8 @@ import { StyledAsidePanel } from "../StyledPanels"; import { useTranslation, withTranslation } from "react-i18next"; import FileInputWithFolderPath from "@appserver/components/file-input-with-folder-path"; import styled from "styled-components"; - +import Loader from "@appserver/components/loader"; +import Text from "@appserver/components/text"; const { auth: authStore } = store; let path = ""; @@ -19,6 +20,14 @@ const StyledComponent = styled.div` .input-with-folder-path { margin-top: 16px; } + .panel-loader-wrapper { + margin-top: 8px; + padding-left: 32px; + } + .panel-loader { + display: inline; + margin-right: 10px; + } `; class OperationsDialog extends React.PureComponent { constructor(props) { @@ -26,6 +35,7 @@ class OperationsDialog extends React.PureComponent { this.inputRef = React.createRef(); this.state = { isLoading: false, + isLoadingData: false, selectedInput: "", fullFolderPath: "", thirdParty: "", @@ -55,21 +65,22 @@ class OperationsDialog extends React.PureComponent { // }; onSelect = (folder, treeNode) => { const { onSelectFolder, onClose } = this.props; - - getFolderPath(folder).then((res) => - this.setState( - { - selectedInput: this.inputRef.current.props.name, - }, - function () { - this.getTitlesFolders(res); - } - ) - ); - - onSelectFolder(folder); - - onClose(); + this.setState({ isLoadingData: true }, function () { + getFolderPath(folder) + .then((res) => + this.setState( + { + selectedInput: this.inputRef.current.props.name, + }, + function () { + this.getTitlesFolders(res); + } + ) + ) + .then(() => onSelectFolder(folder)) + .then(() => onClose()) + .finally(() => this.setState({ isLoadingData: false })); + }); }; getTitlesFolders = (folderPath) => { const { selectedInput } = this.state; @@ -117,15 +128,14 @@ class OperationsDialog extends React.PureComponent { isCommonWithoutProvider, onClose, } = this.props; - const { isLoading, selectedInput } = this.state; + const { isLoading, selectedInput, isLoadingData } = this.state; const zIndex = 310; - //console.log("folderList ", folderList); + console.log("folderList ", isLoadingData); return ( {t("ChooseFolder")} + - + {!isLoadingData ? ( + + ) : ( +
+ + {t("LoadingLabel")} +
+ )}