Client: fix first skeleton render (remove skeleton waterflow)

packages/client/src/HOCs/withLoader.js

@@ -20,8 +20,13 @@ const withLoader = (WrappedComponent) => (Loader) => {
       showBodyLoader,
       isLoadingFilesFind,
       accountsViewAs,
+      setBodyRendered,
     } = props;
 
+    React.useEffect(() => {
+      setBodyRendered(true);
+    }, []);
+
     const location = useLocation();
 
     const currentViewAs = location.pathname.includes("/accounts/filter")
@@ -61,7 +66,7 @@ const withLoader = (WrappedComponent) => (Loader) => {
 
       const { firstLoad, isLoading, showBodyLoader } = clientLoadingStore;
       const { settingsStore } = auth;
-      const { setIsBurgerLoading } = settingsStore;
+      const { setIsBurgerLoading, setBodyRendered } = settingsStore;
       const { isPublicRoom } = publicRoomStore;
 
       return {
@@ -74,6 +79,7 @@ const withLoader = (WrappedComponent) => (Loader) => {
         isInit: isPublicRoom ? true : isInit,
         showBodyLoader,
         accountsViewAs,
+        setBodyRendered,
       };
     }
   )(observer(withLoader));

packages/client/src/Shell.jsx

@@ -28,6 +28,7 @@ import MainBar from "./components/MainBar";
 import { Portal } from "@docspace/components";
 import indexedDbHelper from "@docspace/common/utils/indexedDBHelper";
 import { DeviceType, IndexedDBStores } from "@docspace/common/constants";
+import AppLoader from "@docspace/common/components/AppLoader";
 
 const Shell = ({ items = [], page = "home", ...rest }) => {
   const {
@@ -52,6 +53,8 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
     standalone,
     userId,
     currentDeviceType,
+    bodyRendered,
+    showArticleLoader,
   } = rest;
 
   useEffect(() => {
@@ -341,6 +344,21 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
       <Toast />
     );
 
+  const withList =
+    pathname.includes("rooms") ||
+    pathname.includes("files") ||
+    pathname.includes("accounts");
+
+  console.log(
+    pathname,
+
+    bodyRendered,
+    showArticleLoader,
+    withList,
+
+    !bodyRendered && showArticleLoader && withList
+  );
+
   return (
     <Layout>
       {toast}
@@ -350,6 +368,7 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
       <IndicatorLoader />
       <ScrollToTop />
       <DialogsWrapper t={t} />
+      {!bodyRendered && showArticleLoader && withList && <AppLoader />}
       <Main isDesktop={isDesktop}>
         {currentDeviceType !== DeviceType.mobile && <MainBar />}
         <div className="main-container">
@@ -360,7 +379,7 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
   );
 };
 
-const ShellWrapper = inject(({ auth, backup }) => {
+const ShellWrapper = inject(({ auth, backup, clientLoadingStore }) => {
   const { init, isLoaded, settingsStore, setProductVersion, language } = auth;
 
   const {
@@ -377,6 +396,7 @@ const ShellWrapper = inject(({ auth, backup }) => {
     whiteLabelLogoUrls,
     standalone,
     currentDeviceType,
+    bodyRendered,
   } = settingsStore;
 
   const isBase = settingsStore.theme.isBase;
@@ -420,6 +440,8 @@ const ShellWrapper = inject(({ auth, backup }) => {
     whiteLabelLogoUrls,
     standalone,
     currentDeviceType,
+    bodyRendered,
+    showArticleLoader: clientLoadingStore.showArticleLoader,
   };
 })(observer(Shell));
 

packages/common/store/SettingsStore.js

@@ -193,6 +193,8 @@ class SettingsStore {
 
   windowWidth = window.innerWidth;
 
+  bodyRendered = false;
+
   constructor() {
     makeAutoObservable(this);
   }
@@ -201,6 +203,10 @@ class SettingsStore {
     this.tenantStatus = tenantStatus;
   };
 
+  setBodyRendered = (value) => {
+    this.bodyRendered = value;
+  };
+
   get docspaceSettingsUrl() {
     return `${this.helpLink}/administration/docspace-settings.aspx`;
   }