Web:Files: synchronized first display first loader

products/ASC.Files/Client/src/components/Article/Body/index.js

@@ -35,7 +35,7 @@ const ArticleBodyContent = (props) => {
     isVisitor,
     campaigns,
     FirebaseHelper,
-    isArticleLoaded,
+    isArticleLoading,
   } = props;
   const onClick = React.useCallback((data) => {
     const {
@@ -86,7 +86,7 @@ const ArticleBodyContent = (props) => {
     props.setNewFilesPanelVisible(true, [`${folderId}`]);
   }, []);
 
-  return !isArticleLoaded ? (
+  return isArticleLoading ? (
     <Loaders.ArticleFolder />
   ) : (
     <>
@@ -124,12 +124,13 @@ export default inject(
       setIsLoading,
       setFirstLoad,
       firstLoad,
-      isArticleLoaded,
+      isLoading,
+      isLoaded,
     } = filesStore;
     const { treeFolders, setTreeFolders } = treeFoldersStore;
 
     const { setNewFilesPanelVisible } = dialogsStore;
-
+    const isArticleLoading = (!isLoaded || isLoading) && firstLoad;
     const {
       showText,
       articleOpen,
@@ -157,7 +158,7 @@ export default inject(
       homepage: config.homepage,
       personal,
 
-      isArticleLoaded,
+      isArticleLoading,
       setIsLoading,
       setFirstLoad,
       fetchFiles,

products/ASC.Files/Client/src/components/Article/Header/index.js

@@ -2,8 +2,8 @@ import React from "react";
 import Loaders from "@appserver/common/components/Loaders";
 import { inject, observer } from "mobx-react";
 
-const ArticleHeaderContent = ({ currentModuleName, isArticleLoaded }) => {
-  return !isArticleLoaded ? (
+const ArticleHeaderContent = ({ currentModuleName, isArticleLoading }) => {
+  return isArticleLoading ? (
     <Loaders.ArticleHeader />
   ) : (
     <>{currentModuleName}</>
@@ -11,10 +11,10 @@ const ArticleHeaderContent = ({ currentModuleName, isArticleLoaded }) => {
 };
 
 export default inject(({ auth, filesStore }) => {
-  const { isArticleLoaded } = filesStore;
-
+  const { isLoaded, isLoading, firstLoad } = filesStore;
+  const isArticleLoading = (!isLoaded || isLoading) && firstLoad;
   return {
-    isArticleLoaded,
+    isArticleLoading,
     currentModuleName: (auth.product && auth.product.title) || "",
   };
 })(observer(ArticleHeaderContent));

products/ASC.Files/Client/src/components/Article/MainButton/index.js

@@ -15,6 +15,7 @@ import { encryptionUploadDialog } from "../../../helpers/desktop";
 import config from "../../../../package.json";
 
 import MobileView from "./MobileView";
+import withLoader from "../../../HOCs/withLoader";
 
 const ArticleMainButtonContent = (props) => {
   const {
@@ -28,7 +29,7 @@ const ArticleMainButtonContent = (props) => {
     setAction,
     setSelectFileDialogVisible,
     sectionWidth,
-    isArticleLoaded,
+    isArticleLoading,
     isFavoritesFolder,
     isRecentFolder,
     isCommonFolder,
@@ -213,6 +214,7 @@ const ArticleMainButtonContent = (props) => {
     onUploadFolderClick,
   ]);
 
+  console.log("btn render");
   return (
     <>
       {isMobile || isMobileUtils() || isTabletUtils() ? (
@@ -229,7 +231,7 @@ const ArticleMainButtonContent = (props) => {
               />
             )}
         </>
-      ) : !isArticleLoaded ? (
+      ) : isArticleLoading ? (
         <Loaders.ArticleButton />
       ) : (
         <MainButton
@@ -267,7 +269,13 @@ const ArticleMainButtonContent = (props) => {
 
 export default inject(
   ({ filesStore, dialogsStore, uploadDataStore, treeFoldersStore }) => {
-    const { isArticleLoaded, fileActionStore, canCreate } = filesStore;
+    const {
+      isLoaded,
+      firstLoad,
+      isLoading,
+      fileActionStore,
+      canCreate,
+    } = filesStore;
     const {
       isPrivacyFolder,
       isFavoritesFolder,
@@ -278,9 +286,10 @@ export default inject(
     const { startUpload } = uploadDataStore;
     const { setSelectFileDialogVisible } = dialogsStore;
 
+    const isArticleLoading = (!isLoaded || isLoading) && firstLoad;
+
     return {
-      homepage: config.homepage,
-      isArticleLoaded,
+      isArticleLoading,
       isPrivacy: isPrivacyFolder,
       isFavoritesFolder,
       isRecentFolder,