Web: Files: fixed loaders flickering

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

@@ -5,7 +5,7 @@ import EmptyScreenAltSvgDarkUrl from "PUBLIC_DIR/images/empty_screen_alt_dark.sv
 import EmptyScreenCorporateSvgUrl from "PUBLIC_DIR/images/empty_screen_corporate.svg?url";
 import EmptyScreenCorporateDarkSvgUrl from "PUBLIC_DIR/images/empty_screen_corporate_dark.svg?url";
 import { inject, observer } from "mobx-react";
-import React from "react";
+import React, { useEffect } from "react";
 import { withTranslation } from "react-i18next";
 import EmptyContainer from "./EmptyContainer";
 import Link from "@docspace/components/link";
@@ -13,6 +13,7 @@ import Box from "@docspace/components/box";
 import { Text } from "@docspace/components";
 import { ReactSVG } from "react-svg";
 import Loaders from "@docspace/common/components/Loaders";
+import { showLoader, hideLoader } from "./EmptyFolderContainerUtils";
 
 const EmptyFolderContainer = ({
   t,
@@ -43,7 +44,7 @@ const EmptyFolderContainer = ({
       : fetchFiles(parentId).finally(() => setIsLoading(false));
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isLoadedFetchFiles && tReady) {
       setIsLoadedEmptyPage(true);
     } else {
@@ -51,7 +52,7 @@ const EmptyFolderContainer = ({
     }
   }, [isLoadedFetchFiles, tReady]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setIsEmptyPage(true);
 
     return () => {
@@ -149,14 +150,25 @@ const EmptyFolderContainer = ({
     ? EmptyScreenAltSvgUrl
     : EmptyScreenAltSvgDarkUrl;
 
+  useEffect(
+    () => (!isLoadedFetchFiles || !tReady ? showLoader() : hideLoader()),
+    [isLoadedFetchFiles, tReady]
+  );
+
   if (!isLoadedFetchFiles || !tReady) {
-    return <Loaders.EmptyContainerLoader viewAs={viewAs} />;
+    return (
+      <Loaders.EmptyContainerLoader
+        style={{ display: "none", marginTop: 32 }}
+        id="empty-container-loader"
+        viewAs={viewAs}
+      />
+    );
   }
 
   return (
     <EmptyContainer
       headerText={isRooms ? t("RoomCreated") : t("EmptyScreenFolder")}
-      style={{ gridColumnGap: "39px" }}
+      style={{ gridColumnGap: "39px", marginTop: 32 }}
       descriptionText={
         canCreateFiles
           ? t("EmptyFolderDecription")

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

@@ -0,0 +1,21 @@
+let timer = null;
+
+const startInterval = () => {
+  const elem = document.getElementById("empty-container-loader");
+  if (elem) elem.style.display = "grid";
+};
+
+export function showLoader() {
+  hideLoader();
+  timer = setTimeout(() => startInterval(), 300);
+}
+
+export function hideLoader() {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+
+  const elem = document.getElementById("empty-container-loader");
+  if (elem) elem.style.display = "none";
+}

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

@@ -2,7 +2,7 @@
 import PersonSvgUrl from "PUBLIC_DIR/images/person.svg?url";
 import PlusSvgUrl from "PUBLIC_DIR/images/plus.svg?url";
 import EmptyFolderImageSvgUrl from "PUBLIC_DIR/images/empty-folder-image.svg?url";
-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 import { FolderType } from "@docspace/common/constants";
 import { inject, observer } from "mobx-react";
@@ -33,6 +33,8 @@ import EmptyScreenTrashSvgDarkUrl from "PUBLIC_DIR/images/empty_screen_trash_dar
 import EmptyScreenArchiveUrl from "PUBLIC_DIR/images/empty_screen_archive.svg?url";
 import EmptyScreenArchiveDarkUrl from "PUBLIC_DIR/images/empty_screen_archive_dark.svg?url";
 
+import { showLoader, hideLoader } from "./EmptyFolderContainerUtils";
+
 const StyledPlusIcon = styled(PlusIcon)`
   path {
     fill: #657077;
@@ -99,9 +101,7 @@ const RootFolderContainer = (props) => {
 
   const roomHeader = "Welcome to DocSpace";
 
-  const [showLoader, setShowLoader] = React.useState(false);
-
-  React.useEffect(() => {
+  useEffect(() => {
     if (rootFolderType !== FolderType.COMMON) {
       setIsEmptyPage(true);
     } else {
@@ -114,7 +114,7 @@ const RootFolderContainer = (props) => {
     };
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setIsLoadedEmptyPage(!isLoading);
   }, [isLoading]);
 
@@ -353,8 +353,16 @@ const RootFolderContainer = (props) => {
   const headerText = isPrivacyFolder ? privateRoomHeader : title;
   const emptyFolderProps = getEmptyFolderProps();
 
+  useEffect(() => (isLoading ? showLoader() : hideLoader()), [isLoading]);
+
   if (isLoading) {
-    return <Loaders.EmptyContainerLoader viewAs={viewAs} />;
+    return (
+      <Loaders.EmptyContainerLoader
+        style={{ display: "none", marginTop: 32 }}
+        id="empty-container-loader"
+        viewAs={viewAs}
+      />
+    );
   }
 
   return (
@@ -362,6 +370,7 @@ const RootFolderContainer = (props) => {
       headerText={headerText}
       isEmptyPage={isEmptyPage}
       sectionWidth={sectionWidth}
+      style={{ marginTop: 32 }}
       {...emptyFolderProps}
     />
   );

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

@@ -0,0 +1,21 @@
+let timer = null;
+
+const startInterval = () => {
+  const elem = document.getElementById("filter-loader");
+  if (elem) elem.style.display = "grid";
+};
+
+export function showLoader() {
+  hideLoader();
+  timer = setTimeout(() => startInterval(), 300);
+}
+
+export function hideLoader() {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+
+  const elem = document.getElementById("filter-loader");
+  if (elem) elem.style.display = "none";
+}

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

@@ -1,6 +1,6 @@
 import ViewRowsReactSvgUrl from "PUBLIC_DIR/images/view-rows.react.svg?url";
 import ViewTilesReactSvgUrl from "PUBLIC_DIR/images/view-tiles.react.svg?url";
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { isMobile } from "react-device-detect";
 import { withRouter } from "react-router";
@@ -26,6 +26,7 @@ import { getDefaultRoomName } from "@docspace/client/src/helpers/filesUtils";
 
 import withLoader from "../../../../HOCs/withLoader";
 import { TableVersions } from "SRC_DIR/helpers/constants";
+import { showLoader, hideLoader } from "./FilterUtils";
 
 const getFilterType = (filterValues) => {
   const filterType = result(
@@ -180,7 +181,7 @@ const SectionFilterContent = ({
   const [selectedFilterValues, setSelectedFilterValues] = React.useState(null);
   const [isLoadedFilter, setIsLoadedFilter] = React.useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isEmptyPage) {
       setIsLoadedFilter(isLoadedEmptyPage);
     }
@@ -1433,8 +1434,12 @@ const SectionFilterContent = ({
     }
   };
 
+  useEffect(() => (!!isLoadedFilter ? showLoader() : hideLoader()), [
+    isLoadedFilter,
+  ]);
+
   if (!isLoadedFilter) {
-    return <Loaders.Filter />;
+    return <Loaders.Filter style={{ display: "none" }} id="filter-loader" />;
   }
 
   return (

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

@@ -552,12 +552,6 @@ class PureHome extends React.Component {
             </Section.SectionFilter>
           )}
 
-          {isLoadedEmptyPage && (
-            <Section.SectionFilter>
-              <div style={{ height: "32px" }} />
-            </Section.SectionFilter>
-          )}
-
           <Section.SectionBody>
             <Consumer>
               {(context) => (

packages/common/components/Loaders/EmptyContainerLoader/EmptyContainerLoader.js

@@ -3,7 +3,7 @@ import Loaders from "../../Loaders";
 import { isMobileOnly, isTablet } from "react-device-detect";
 import { size } from "@docspace/components/utils/device";
 
-const EmptyContainerLoader = ({ viewAs }) => {
+const EmptyContainerLoader = ({ viewAs, style, ...rest }) => {
   const [viewMobile, setViewMobile] = useState(false);
   const [viewTablet, setViewTablet] = useState(false);
 
@@ -33,7 +33,7 @@ const EmptyContainerLoader = ({ viewAs }) => {
   };
 
   return (
-    <>
+    <div {...rest} style={{ display: "contents", style }}>
       {viewAs === "tile" ? (
         !viewMobile && !viewTablet ? (
           <Loaders.Tiles filesCount={7} />
@@ -43,7 +43,7 @@ const EmptyContainerLoader = ({ viewAs }) => {
       ) : (
         <Loaders.Rows count={(viewMobile && 8) || (viewTablet && 12) || 9} />
       )}
-    </>
+    </div>
   );
 };