Web:Studio:Added HOC withLoading.

web/ASC.Web.Client/src/components/pages/Settings/Layout/index.js

@@ -4,11 +4,11 @@ import { ArticleHeaderContent, ArticleBodyContent } from "./Article";
 import { SectionHeaderContent, SectionPagingContent } from "./Section";
 import { inject, observer } from "mobx-react";
 import Section from "@appserver/common/components/Section";
-import LoaderSectionHeader from "./Section/loaderSectionHeader";
-
-const ArticleSettings = React.memo(() => {
+import withLoading from "../../../../HOCs/withLoading";
+import commonIconsStyles from "@appserver/components/utils/common-icons-style";
+const ArticleSettings = React.memo(({ isLoadedPage }) => {
   return (
-    <Article>
+    <Article isLoadedPage={isLoadedPage}>
       <Article.Header>
         <ArticleHeaderContent />
       </Article.Header>
@@ -26,6 +26,7 @@ const Layout = ({
   language,
   children,
   addUsers,
+  isLoadedPage,
 }) => {
   useEffect(() => {
     currentProductId !== "settings" && setCurrentProductId("settings");
@@ -33,7 +34,7 @@ const Layout = ({
 
   return (
     <>
-      <ArticleSettings />
+      <ArticleSettings isLoadedPage={isLoadedPage} />
       <Section withBodyScroll={true}>
         <Section.SectionHeader>
           <SectionHeaderContent />
@@ -53,9 +54,10 @@ const Layout = ({
 export default inject(({ auth, setup }) => {
   const { language, settingsStore } = auth;
   const { addUsers } = setup.headerAction;
+
   return {
     language,
     setCurrentProductId: settingsStore.setCurrentProductId,
     addUsers,
   };
-})(observer(Layout));
+})(withLoading(observer(Layout)));

web/ASC.Web.Client/src/components/pages/Settings/categories/common/customization-navbar.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { withTranslation } from "react-i18next";
 import styled from "styled-components";
 import Text from "@appserver/components/text";
@@ -11,9 +11,8 @@ import withCultureNames from "@appserver/common/hoc/withCultureNames";
 import history from "@appserver/common/history";
 import { Base } from "@appserver/components/themes";
 import LoaderCustomizationNavbar from "./sub-components/loaderCustomizationNavbar";
-
 import { StyledArrowRightIcon } from "../common/settingsCustomization/StyledSettings";
-
+import { withRouter } from "react-router";
 const StyledComponent = styled.div`
   padding-top: 13px;
 
@@ -47,15 +46,28 @@ const StyledComponent = styled.div`
 
 StyledComponent.defaultProps = { theme: Base };
 
-const CustomizationNavbar = ({ t, theme, helpUrlCommonSettings }) => {
+const CustomizationNavbar = ({
+  t,
+  theme,
+  helpUrlCommonSettings,
+  isLoaded,
+  tReady,
+  setIsLoadedCustomizationNavbar,
+  isLoadedPage,
+}) => {
+  const isLoadedSetting = isLoaded && tReady;
+  useEffect(() => {
+    if (isLoadedSetting) setIsLoadedCustomizationNavbar(isLoadedSetting);
+  }, [isLoadedSetting]);
+
   const onClickLink = (e) => {
     e.preventDefault();
     history.push(e.target.pathname);
   };
 
-  //return <LoaderCustomizationNavbar />;
-
-  return (
+  return !isLoadedPage ? (
+    <LoaderCustomizationNavbar />
+  ) : (
     <StyledComponent>
       <div className="category-item-wrapper">
         <div className="category-item-heading">
@@ -128,14 +140,19 @@ const CustomizationNavbar = ({ t, theme, helpUrlCommonSettings }) => {
   );
 };
 
-export default inject(({ auth }) => {
+export default inject(({ auth, common }) => {
   const { helpUrlCommonSettings, theme } = auth.settingsStore;
+  const { isLoaded, setIsLoadedCustomizationNavbar } = common;
   return {
     theme,
     helpUrlCommonSettings,
+    isLoaded,
+    setIsLoadedCustomizationNavbar,
   };
 })(
-  withCultureNames(
-    observer(withTranslation(["Settings", "Common"])(CustomizationNavbar))
+  withRouter(
+    withCultureNames(
+      observer(withTranslation(["Settings", "Common"])(CustomizationNavbar))
+    )
   )
 );

web/ASC.Web.Client/src/components/pages/Settings/categories/common/customization.js

@@ -11,6 +11,8 @@ import CustomizationNavbar from "./customization-navbar";
 import { Base } from "@appserver/components/themes";
 import { setDocumentTitle } from "../../../../../helpers/utils";
 import LoaderDescriptionCustomization from "./sub-components/loaderDescriptionCustomization";
+import { withRouter } from "react-router";
+import withLoading from "../../../../../HOCs/withLoading";
 
 const StyledComponent = styled.div`
   width: 100%;
@@ -65,9 +67,24 @@ const StyledComponent = styled.div`
 
 StyledComponent.defaultProps = { theme: Base };
 
-const Customization = ({ t, setIsLoadingArticleSettings }) => {
+const Customization = (props) => {
+  const { t, isLoaded, tReady, setIsLoadedCustomization, isLoadedPage } = props;
   const [mobileView, setMobileView] = useState(true);
-  const [isLoadingCustomization, setIsLoadingCustomization] = useState(false);
+
+  const isLoadedSetting = isLoaded && tReady;
+
+  useEffect(() => {
+    setDocumentTitle(t("Customization"));
+    window.addEventListener("resize", checkInnerWidth);
+
+    return () => window.removeEventListener("resize", checkInnerWidth);
+  }, []);
+
+  useEffect(() => {
+    if (isLoadedSetting) {
+      setIsLoadedCustomization(isLoadedSetting);
+    }
+  }, [isLoadedSetting]);
 
   const checkInnerWidth = () => {
     if (isSmallTablet()) {
@@ -77,47 +94,35 @@ const Customization = ({ t, setIsLoadingArticleSettings }) => {
     }
   };
 
-  useEffect(() => {
-    setDocumentTitle(t("Customization"));
-    //TODO: Add method to get the portal name
-    setIsLoadingArticleSettings(true);
-    setTimeout(() => {
-      setIsLoadingCustomization(false);
-      setIsLoadingArticleSettings(isLoadingCustomization);
-    }, 3000);
-
-    window.addEventListener("resize", checkInnerWidth);
-    return () => window.removeEventListener("resize", checkInnerWidth);
-  }, []);
-
   const isMobile = !!(isSmallTablet() && mobileView);
 
   return isMobile ? (
-    <CustomizationNavbar />
+    <CustomizationNavbar isLoadedPage={isLoadedPage} />
   ) : (
     <StyledComponent>
-      <div className="category-description">{`${t(
-        "Settings:CustomizationDescription"
-      )}`}</div>
-      {/* <LoaderDescriptionCustomization /> */}
-      <LanguageAndTimeZone
-        isLoadingCustomization={isLoadingCustomization}
-        isMobileView={isMobile}
-      />
+      {!isLoadedPage ? (
+        <LoaderDescriptionCustomization />
+      ) : (
+        <div className="category-description">{`${t(
+          "Settings:CustomizationDescription"
+        )}`}</div>
+      )}
+      <LanguageAndTimeZone isMobileView={isMobile} />
       <WelcomePageSettings isMobileView={isMobile} />
       <PortalRenaming isMobileView={isMobile} />
     </StyledComponent>
   );
 };
 
-export default inject(({ setup }) => {
-  const { setIsLoadingArticleSettings } = setup;
+export default inject(({ common }) => {
+  const { isLoaded, setIsLoadedCustomization } = common;
 
   return {
-    setIsLoadingArticleSettings,
+    isLoaded,
+    setIsLoadedCustomization,
   };
 })(
-  withCultureNames(
-    withTranslation(["Settings", "Common"])(observer(Customization))
+  withLoading(
+    withRouter(withTranslation(["Settings", "Common"])(observer(Customization)))
   )
 );

web/ASC.Web.Client/src/components/pages/Settings/categories/common/index.js

@@ -5,15 +5,35 @@ import { withTranslation } from "react-i18next";
 import { AppServerConfig } from "@appserver/common/constants";
 import { combineUrl } from "@appserver/common/utils";
 import config from "../../../../../../package.json";
-
+import { inject, observer } from "mobx-react";
 import Customization from "./customization";
 import WhiteLabel from "./whitelabel";
-import LoaderSubmenu from "./sub-components/loaderSubmenu";
+import withLoading from "../../../../../HOCs/withLoading";
 
 const SubmenuCommon = (props) => {
-  const { t, history } = props;
+  const {
+    t,
+    history,
+    isLoaded,
+    tReady,
+    setIsLoadedSubmenu,
+    isLoadedPage,
+  } = props;
   const [currentTab, setCurrentTab] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
+
+  const isLoadedSetting = isLoaded && tReady;
+
+  useEffect(() => {
+    const path = location.pathname;
+    const currentTab = data.findIndex((item) => path.includes(item.id));
+    if (currentTab !== -1) {
+      setCurrentTab(currentTab);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isLoadedSetting) setIsLoadedSubmenu(isLoadedSetting);
+  }, [isLoadedSetting]);
 
   const data = [
     {
@@ -28,15 +48,6 @@ const SubmenuCommon = (props) => {
     },
   ];
 
-  useEffect(() => {
-    const path = location.pathname;
-    const currentTab = data.findIndex((item) => path.includes(item.id));
-    if (currentTab !== -1) {
-      setCurrentTab(currentTab);
-    }
-    //setIsLoading(true);
-  }, []);
-
   const onSelect = (e) => {
     history.push(
       combineUrl(
@@ -46,16 +57,23 @@ const SubmenuCommon = (props) => {
       )
     );
   };
-  //TODO: isLoading
-  return isLoading ? (
-    <LoaderSubmenu />
-  ) : (
+
+  return (
     <Submenu
       data={data}
       startSelect={currentTab}
       onSelect={(e) => onSelect(e)}
+      isLoading={!isLoadedPage}
     />
   );
 };
 
-export default withTranslation("Settings")(withRouter(SubmenuCommon));
+export default inject(({ common }) => {
+  const { isLoaded, setIsLoadedSubmenu } = common;
+  return {
+    isLoaded,
+    setIsLoadedSubmenu,
+  };
+})(
+  withLoading(withRouter(withTranslation("Settings")(observer(SubmenuCommon))))
+);

web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/portal-renaming.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import { withTranslation } from "react-i18next";
-import Loader from "@appserver/components/loader";
 import toastr from "@appserver/components/toast/toastr";
 import HelpButton from "@appserver/components/help-button";
 import FieldContainer from "@appserver/components/field-container";
@@ -19,10 +18,18 @@ import { StyledSettingsComponent, StyledScrollbar } from "./StyledSettings";
 import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
 import { setDocumentTitle } from "../../../../../../helpers/utils";
 import LoaderCustomization from "../sub-components/loaderCustomization";
+import withLoading from "../../../../../../HOCs/withLoading";
+const PortalRenaming = (props) => {
+  const {
+    t,
+    setPortalRename,
+    isMobileView,
+    tReady,
+    isLoaded,
+    setIsLoadedPortalRenaming,
+    isLoadedPage,
+  } = props;
 
-const PortalRenaming = ({ t, setPortalRename, isMobileView }) => {
-  // TODO: Change false
-  const [isLoadedData, setIsLoadedData] = useState(true);
   const [isLoadingPortalNameSave, setIsLoadingPortalNameSave] = useState(false);
 
   const portalNameFromSessionStorage = getFromSessionStorage("portalName");
@@ -46,6 +53,8 @@ const PortalRenaming = ({ t, setPortalRename, isMobileView }) => {
   const lengthNameError =
     "The account name must be between 6 and 50 characters long";
 
+  const isLoadedSetting = isLoaded && tReady;
+
   useEffect(() => {
     setDocumentTitle(t("PortalRenaming"));
 
@@ -77,6 +86,10 @@ const PortalRenaming = ({ t, setPortalRename, isMobileView }) => {
       );
   }, []);
 
+  useEffect(() => {
+    if (isLoadedSetting) setIsLoadedPortalRenaming(isLoadedSetting);
+  }, [isLoadedSetting]);
+
   //TODO: Need a method to get the portal name
   const onSavePortalRename = () => {
     setIsLoadingPortalNameSave(true);
@@ -187,9 +200,8 @@ const PortalRenaming = ({ t, setPortalRename, isMobileView }) => {
     </div>
   );
 
-  //return <LoaderCustomization portalRenaming={true} />;
-  return !isLoadedData ? (
-    <Loader className="pageLoader" type="rombs" size="40px" />
+  return !isLoadedPage ? (
+    <LoaderCustomization portalRenaming={true} />
   ) : (
     <StyledSettingsComponent
       hasScroll={hasScroll}
@@ -225,12 +237,16 @@ const PortalRenaming = ({ t, setPortalRename, isMobileView }) => {
   );
 };
 
-export default inject(({ auth, setup }) => {
+export default inject(({ auth, setup, common }) => {
   const { theme } = auth.settingsStore;
   const { setPortalRename } = setup;
-
+  const { isLoaded, setIsLoadedPortalRenaming } = common;
   return {
     theme,
     setPortalRename,
+    isLoaded,
+    setIsLoadedPortalRenaming,
   };
-})(withTranslation(["Settings", "Common"])(observer(PortalRenaming)));
+})(
+  withLoading(withTranslation(["Settings", "Common"])(observer(PortalRenaming)))
+);

web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/welcome-page-settings.js

@@ -20,6 +20,7 @@ import { isSmallTablet } from "@appserver/components/utils/device";
 import checkScrollSettingsBlock from "../utils";
 import { StyledSettingsComponent, StyledScrollbar } from "./StyledSettings";
 import LoaderCustomization from "../sub-components/loaderCustomization";
+import withLoading from "../../../../../../HOCs/withLoading";
 
 let greetingTitleFromSessionStorage = "";
 let greetingTitleDefaultFromSessionStorage = "";
@@ -45,7 +46,6 @@ class WelcomePageSettings extends React.Component {
     setDocumentTitle(t("CustomTitlesWelcome"));
 
     this.state = {
-      isLoadedData: false,
       isLoading: false,
       greetingTitle: greetingTitleFromSessionStorage || greetingSettings,
       greetingTitleDefault:
@@ -61,15 +61,17 @@ class WelcomePageSettings extends React.Component {
 
   componentDidMount() {
     window.addEventListener("resize", this.checkInnerWidth);
-    showLoader();
-    this.setState({
-      isLoadedData: true,
-    });
-    hideLoader();
   }
 
   componentDidUpdate(prevProps, prevState) {
+    const { isLoaded, setIsLoadedWelcomePageSettings, tReady } = this.props;
+
     const { hasScroll } = this.state;
+
+    const isLoadedSetting = isLoaded && tReady;
+
+    if (isLoadedSetting) setIsLoadedWelcomePageSettings(isLoadedSetting);
+
     const checkScroll = checkScrollSettingsBlock();
 
     window.addEventListener("resize", checkScroll);
@@ -90,12 +92,6 @@ class WelcomePageSettings extends React.Component {
       settingsMobile.style.display = "none";
     }
 
-    if (prevState.isLoadedData !== true) {
-      this.setState({
-        isLoadedData: true,
-      });
-    }
-
     if (this.state.greetingTitleDefault) {
       this.checkChanges();
     }
@@ -217,9 +213,8 @@ class WelcomePageSettings extends React.Component {
   };
 
   render() {
-    const { t, isMobileView } = this.props;
+    const { t, isMobileView, isLoadedPage } = this.props;
     const {
-      isLoadedData,
       greetingTitle,
       isLoadingGreetingSave,
       isLoadingGreetingRestore,
@@ -250,9 +245,8 @@ class WelcomePageSettings extends React.Component {
       </div>
     );
 
-    // return <LoaderCustomization welcomePage={true} />;
-    return !isLoadedData ? (
-      <Loader className="pageLoader" type="rombs" size="40px" />
+    return !isLoadedPage ? (
+      <LoaderCustomization welcomePage={true} />
     ) : (
       <StyledSettingsComponent
         hasScroll={hasScroll}
@@ -293,14 +287,21 @@ class WelcomePageSettings extends React.Component {
   }
 }
 
-export default inject(({ auth, setup }) => {
+export default inject(({ auth, setup, common }) => {
   const { greetingSettings, organizationName, theme } = auth.settingsStore;
   const { setGreetingTitle, restoreGreetingTitle } = setup;
+  const { isLoaded, setIsLoadedWelcomePageSettings } = common;
   return {
     theme,
     greetingSettings,
     organizationName,
     setGreetingTitle,
     restoreGreetingTitle,
+    isLoaded,
+    setIsLoadedWelcomePageSettings,
   };
-})(withTranslation(["Settings", "Common"])(observer(WelcomePageSettings)));
+})(
+  withLoading(
+    withTranslation(["Settings", "Common"])(observer(WelcomePageSettings))
+  )
+);