Web: Files: Fixed loaders according layouts.

products/ASC.Files/Client/src/components/panels/SelectFileDialog/AsideView.js

@@ -61,7 +61,7 @@ const SelectFileDialogAsideView = ({
         //className="select-file-modal-dialog"
         //style={{ maxWidth: "890px" }}
         contentHeight="100%"
-        displayType="aside"
+        displayType={DISPLAY_TYPE}
         //bodyPadding="0"
         removeScroll
       >
@@ -69,7 +69,10 @@ const SelectFileDialogAsideView = ({
           {headerName ? headerName : t("SelectFile")}
         </ModalDialog.Header>
         <ModalDialog.Body className="select-file_body-modal-dialog">
-          <StyledSelectFilePanel isHeaderChildren={isHeaderChildren}>
+          <StyledSelectFilePanel
+            isHeaderChildren={isHeaderChildren}
+            displayType={DISPLAY_TYPE}
+          >
             <div className="select-file-dialog_aside-body_wrapper">
               <div className="select-file-dialog_aside-children">{header}</div>
               {/* <Text fontWeight="600" fontSize="14px">
@@ -109,15 +112,13 @@ const SelectFileDialogAsideView = ({
                       selectedFile={selectedFile}
                     />
                   ) : isAvailableFolderList ? (
-                    <div key="loader">
-                      <Loader
-                        type="oval"
-                        size="16px"
-                        className="panel-loader"
+                    <div key="loader" className="panel-loader-wrapper">
+                      <Loaders.Rows
+                        style={{
+                          marginBottom: "24px",
+                        }}
+                        count={12}
                       />
-                      <Text as="span">{`${t("Common:LoadingProcessing")} ${t(
-                        "Common:LoadingDescription"
-                      )}`}</Text>
                     </div>
                   ) : (
                     <div className="select-file-dialog_empty-container">

products/ASC.Files/Client/src/components/panels/SelectFileDialog/FilesListBody.js

@@ -10,7 +10,7 @@ import { inject, observer } from "mobx-react";
 import FilesListRow from "./FilesListRow";
 import EmptyContainer from "../../EmptyContainer/EmptyContainer";
 import i18n from "./i18n";
-
+import Loaders from "@appserver/common/components/Loaders";
 import { I18nextProvider } from "react-i18next";
 
 const FilesListBody = ({
@@ -52,18 +52,33 @@ const FilesListBody = ({
   }, [isNextPageLoading, filesList, displayType]);
 
   const renderLoader = useCallback(
-    (style) => {
+    (style, index) => {
       return (
         <div style={style}>
-          <div key="loader" className="panel-loader-wrapper">
-            <Loader type="oval" size="16px" className="panel-loader" />
-            <Text as="span">{loadingText}</Text>
+          <div
+            key="loader"
+            className="panel-loader-wrapper loader-wrapper_margin"
+          >
+            {index > 10 ? (
+              <>
+                <Loader type="oval" size="16px" className="panel-loader" />
+                <Text as="span">{loadingText}</Text>
+              </>
+            ) : (
+              <Loaders.Rows
+                style={{
+                  marginBottom: displayType === "aside" ? "24px" : "19px",
+                }}
+                count={displayType === "aside" ? 12 : 7}
+              />
+            )}
           </div>
         </div>
       );
     },
     [loadingText]
   );
+
   const isFileChecked = useCallback(
     (file) => {
       const checked = selectedFile ? file.id === selectedFile.id : false;
@@ -76,7 +91,7 @@ const FilesListBody = ({
       const isLoaded = isItemLoaded(index);
 
       if (!isLoaded) {
-        return renderLoader(style);
+        return renderLoader(style, index);
       }
 
       const file = filesList[index];

products/ASC.Files/Client/src/components/panels/SelectFileDialog/ModalView.js

@@ -12,7 +12,7 @@ import Text from "@appserver/components/text";
 import { isArrayEqual } from "@appserver/components/utils/array";
 import { FolderType } from "@appserver/common/constants";
 import { getFoldersTree } from "@appserver/common/api/files";
-
+import Loaders from "@appserver/common/components/Loaders";
 const exceptSortedByTagsFolders = [
   FolderType.Recent,
   FolderType.TRASH,
@@ -193,55 +193,48 @@ class SelectFileDialogModalView extends React.Component {
           style={{ maxWidth: "725px" }}
           displayType="modal"
           bodyPadding="0"
+          isLoading={isLoading}
+          modalDialogHeight="277px"
         >
           <ModalDialog.Header>
             {headerName ? headerName : t("SelectFile")}
           </ModalDialog.Header>
           <ModalDialog.Body className="select-file_body-modal-dialog">
-            <StyledSelectFilePanel isHeaderChildren={isHeaderChildren}>
-              {!isLoading ? (
-                <div className="modal-dialog_body">
-                  <div className="modal-dialog_children">{header}</div>
-                  <div className="modal-dialog_tree-body">
-                    <FolderTreeBody
-                      expandedKeys={expandedKeys}
-                      folderList={this.folderList}
-                      onSelect={this.onSelect}
-                      withoutProvider={withoutProvider}
-                      certainFolders
-                      isAvailable={isAvailable}
-                      filter={filter}
-                      selectedKeys={[selectedFolder]}
-                      isHeaderChildren={isHeaderChildren}
+            <StyledSelectFilePanel
+              isHeaderChildren={isHeaderChildren}
+              displayType="modal"
+            >
+              <div className="modal-dialog_body">
+                <div className="modal-dialog_children">{header}</div>
+                <div className="modal-dialog_tree-body">
+                  <FolderTreeBody
+                    expandedKeys={expandedKeys}
+                    folderList={this.folderList}
+                    onSelect={this.onSelect}
+                    withoutProvider={withoutProvider}
+                    certainFolders
+                    isAvailable={isAvailable}
+                    filter={filter}
+                    selectedKeys={[selectedFolder]}
+                    isHeaderChildren={isHeaderChildren}
+                  />
+                </div>
+                <div className="modal-dialog_files-body">
+                  {selectedFolder && (
+                    <FilesListBody
+                      filesList={filesList}
+                      onSelectFile={onSelectFile}
+                      hasNextPage={hasNextPage}
+                      isNextPageLoading={isNextPageLoading}
+                      loadNextPage={loadNextPage}
+                      selectedFolder={selectedFolder}
+                      loadingText={loadingText}
+                      selectedFile={selectedFile}
+                      listHeight={isHeaderChildren ? 280 : 310}
                     />
-                  </div>
-                  <div className="modal-dialog_files-body">
-                    {selectedFolder && (
-                      <FilesListBody
-                        filesList={filesList}
-                        onSelectFile={onSelectFile}
-                        hasNextPage={hasNextPage}
-                        isNextPageLoading={isNextPageLoading}
-                        loadNextPage={loadNextPage}
-                        selectedFolder={selectedFolder}
-                        loadingText={loadingText}
-                        selectedFile={selectedFile}
-                        listHeight={isHeaderChildren ? 280 : 310}
-                      />
-                    )}
-                  </div>
+                  )}
                 </div>
-              ) : (
-                <div
-                  key="loader"
-                  className="select-file-dialog_modal-loader panel-loader-wrapper"
-                >
-                  <Loader type="oval" size="16px" className="panel-loader" />
-                  <Text as="span">{`${t("Common:LoadingProcessing")} ${t(
-                    "Common:LoadingDescription"
-                  )}`}</Text>
-                </div>
-              )}
+              </div>
             </StyledSelectFilePanel>
           </ModalDialog.Body>
           <ModalDialog.Footer>

products/ASC.Files/Client/src/components/panels/StyledPanels.js

@@ -668,10 +668,12 @@ const StyledSelectFilePanel = styled.div`
     ${(props) =>
       props.displayType === "aside" &&
       css`
-    margin-left: -16px;
-    margin-right: -16px;
-    .nav-thumb-vertical {
-      margin-left: -7px !important;`}
+        margin-left: -16px;
+        margin-right: -16px;
+        .nav-thumb-vertical {
+          margin-left: -7px !important;
+        }
+      `}
   }
   .select-file-dialog_aside_body-files_list {
     height: 100%;
@@ -720,7 +722,20 @@ const StyledSelectFilePanel = styled.div`
     padding: 7px 0px;
   }
   .panel-loader-wrapper {
-    margin-top: 8px;
+    ${(props) =>
+      props.displayType === "modal" &&
+      css`
+        margin-top: 16px;
+      `};
+    .first-row-content__mobile {
+      width: ${(props) => (props.displayType === "aside" ? "147px" : "402px")};
+    }
+    .second-row-content__mobile {
+      width: 229px;
+    }
+  }
+  .loader-wrapper_margin {
+    margin-left: 16px;
   }
   .select-file-dialog_modal-loader {
     height: 290px;
@@ -746,7 +761,7 @@ const StyledSelectFilePanel = styled.div`
   .modal-dialog_body {
     display: grid;
     grid-template-columns: 212px 489px;
-    height: 300px;
+    height: 280px;
     // grid-column-gap: 8px;
     grid-template-areas: "children children" "tree files-list";
     .modal-dialog_tree-body {