Web:Client:Adding a filter loading skeleton when the EmptyScreen skeleton is shown.

packages/client/src/components/EmptyContainer/EmptyFolderContainer.js

@@ -26,6 +26,7 @@ const EmptyFolderContainer = ({
   tReady,
   isLoadedFetchFiles,
   viewAs,
+  setIsLoadedEmptyPage,
 }) => {
   const onBackToParentFolder = () => {
     setIsLoading(true);
@@ -35,10 +36,21 @@ const EmptyFolderContainer = ({
       : fetchFiles(parentId).finally(() => setIsLoading(false));
   };
 
+  React.useEffect(() => {
+    if (isLoadedFetchFiles && tReady) {
+      setIsLoadedEmptyPage(true);
+    } else {
+      setIsLoadedEmptyPage(false);
+    }
+  }, [isLoadedFetchFiles, tReady]);
+
   React.useEffect(() => {
     setIsEmptyPage(true);
 
-    return () => setIsEmptyPage(false);
+    return () => {
+      setIsEmptyPage(false);
+      setIsLoadedEmptyPage(false);
+    };
   }, []);
 
   const onInviteUsersClick = () => {
@@ -161,6 +173,7 @@ export default inject(
       setIsEmptyPage,
       isLoadedFetchFiles,
       viewAs,
+      setIsLoadedEmptyPage,
     } = filesStore;
     const {
       navigationPath,
@@ -198,6 +211,7 @@ export default inject(
       folderId,
       isLoadedFetchFiles,
       viewAs,
+      setIsLoadedEmptyPage,
     };
   }
 )(withTranslation(["Files", "Translations"])(observer(EmptyFolderContainer)));

packages/client/src/components/EmptyContainer/RootFolderContainer.js

@@ -48,6 +48,7 @@ const RootFolderContainer = (props) => {
     setIsEmptyPage,
     isVisitor,
     sectionWidth,
+    setIsLoadedEmptyPage,
   } = props;
   const personalDescription = t("EmptyFolderDecription");
 
@@ -87,8 +88,17 @@ const RootFolderContainer = (props) => {
 
     return () => {
       setIsEmptyPage(false);
+      setIsLoadedEmptyPage(false);
     };
-  }, [isEmptyPage, setIsEmptyPage, rootFolderType]);
+  }, []);
+
+  React.useEffect(() => {
+    if (!isLoading) {
+      setIsLoadedEmptyPage(true);
+    } else {
+      setIsLoadedEmptyPage(false);
+    }
+  }, [isLoading]);
 
   const onGoToPersonal = () => {
     const newFilter = filter.clone();
@@ -313,31 +323,17 @@ const RootFolderContainer = (props) => {
   const headerText = isPrivacyFolder ? privateRoomHeader : title;
   const emptyFolderProps = getEmptyFolderProps();
 
-  React.useEffect(() => {
-    let timeout;
-
-    if (isLoading) {
-      setShowLoader(isLoading);
-    } else {
-      timeout = setTimeout(() => setShowLoader(isLoading), 300);
-    }
-
-    return () => clearTimeout(timeout);
-  }, [isLoading]);
+  if (isLoading) {
+    return <Loaders.EmptyContainerLoader viewAs={viewAs} />;
+  }
 
   return (
-    <>
-      {showLoader ? (
-        <Loaders.EmptyContainerLoader viewAs={viewAs} />
-      ) : (
-        <EmptyContainer
-          headerText={headerText}
-          isEmptyPage={isEmptyPage}
-          sectionWidth={sectionWidth}
-          {...emptyFolderProps}
-        />
-      )}
-    </>
+    <EmptyContainer
+      headerText={headerText}
+      isEmptyPage={isEmptyPage}
+      sectionWidth={sectionWidth}
+      {...emptyFolderProps}
+    />
   );
 };
 
@@ -362,6 +358,7 @@ export default inject(
       setAlreadyFetchingRooms,
       isEmptyPage,
       setIsEmptyPage,
+      setIsLoadedEmptyPage,
     } = filesStore;
     const { title, rootFolderType } = selectedFolderStore;
     const { isPrivacyFolder, myFolderId } = treeFoldersStore;
@@ -387,6 +384,7 @@ export default inject(
       setAlreadyFetchingRooms,
       isEmptyPage,
       setIsEmptyPage,
+      setIsLoadedEmptyPage,
     };
   }
 )(withTranslation(["Files"])(observer(RootFolderContainer)));

packages/client/src/pages/Home/Section/Filter/index.js

@@ -169,8 +169,21 @@ const SectionFilterContent = ({
   searchTitleOpenLocation,
   isLoadedLocationFiles,
   setIsLoadedSearchFiles,
+  isLoadedEmptyPage,
+  isEmptyPage,
 }) => {
   const [selectedFilterValues, setSelectedFilterValues] = React.useState(null);
+  const [isLoadedFilter, setIsLoadedFilter] = React.useState(false);
+
+  React.useEffect(() => {
+    if (isEmptyPage) {
+      setIsLoadedFilter(isLoadedEmptyPage);
+    }
+
+    if (!isEmptyPage && !isLoadedEmptyPage) {
+      setIsLoadedFilter(true);
+    }
+  }, [isLoadedEmptyPage, isEmptyPage]);
 
   React.useEffect(() => {
     if (!(searchTitleOpenLocation && isLoadedLocationFiles)) return;
@@ -1298,6 +1311,10 @@ const SectionFilterContent = ({
     }
   };
 
+  if (!isLoadedFilter) {
+    return <Loaders.Filter />;
+  }
+
   return (
     <FilterInput
       t={t}
@@ -1347,6 +1364,8 @@ export default inject(
       createThumbnails,
       setCurrentRoomsFilter,
       thirdPartyStore,
+      isLoadedEmptyPage,
+      isEmptyPage,
     } = filesStore;
 
     const { providers } = thirdPartyStore;
@@ -1405,6 +1424,9 @@ export default inject(
       setSearchTitleOpenLocation,
       isLoadedLocationFiles,
       setIsLoadedSearchFiles,
+
+      isLoadedEmptyPage,
+      isEmptyPage,
     };
   }
 )(

packages/client/src/pages/Home/index.js

@@ -492,6 +492,7 @@ class PureHome extends React.Component {
       frameConfig,
       withPaging,
       isEmptyPage,
+      isLoadedEmptyPage,
     } = this.props;
 
     if (window.parent && !frameConfig) {
@@ -538,7 +539,7 @@ class PureHome extends React.Component {
             </Section.SectionHeader>
           )}
 
-          {!isEmptyPage && !isErrorRoomNotAvailable && (
+          {!isLoadedEmptyPage && !isErrorRoomNotAvailable && (
             <Section.SectionFilter>
               {isFrame ? (
                 showFilter && <SectionFilterContent />
@@ -548,6 +549,12 @@ class PureHome extends React.Component {
             </Section.SectionFilter>
           )}
 
+          {isLoadedEmptyPage && (
+            <Section.SectionFilter>
+              <div style={{ height: "32px" }} />
+            </Section.SectionFilter>
+          )}
+
           <Section.SectionBody>
             <Consumer>
               {(context) => (
@@ -622,7 +629,7 @@ export default inject(
       refreshFiles,
       setViewAs,
       isEmptyPage,
-
+      isLoadedEmptyPage,
       disableDrag,
       isErrorRoomNotAvailable,
     } = filesStore;
@@ -773,6 +780,7 @@ export default inject(
       setViewAs,
       withPaging,
       isEmptyPage,
+      isLoadedEmptyPage,
     };
   }
 )(withRouter(observer(Home)));

packages/client/src/store/FilesStore.js

@@ -109,6 +109,8 @@ class FilesStore {
   roomsController = null;
   filesController = null;
 
+  isLoadedEmptyPage = false;
+
   constructor(
     authStore,
     selectedFolderStore,
@@ -131,7 +133,6 @@ class FilesStore {
 
     this.roomsController = new AbortController();
     this.filesController = new AbortController();
-
     const { socketHelper, withPaging } = authStore.settingsStore;
 
     socketHelper.on("s:modify-folder", async (opt) => {
@@ -425,6 +426,10 @@ class FilesStore {
     this.isEmptyPage = isEmptyPage;
   };
 
+  setIsLoadedEmptyPage = (isLoadedEmptyPage) => {
+    this.isLoadedEmptyPage = isLoadedEmptyPage;
+  };
+
   get tooltipOptions() {
     if (!this.dragging) return null;