Web: Added new SettingsDSConnect loader

packages/client/src/pages/PortalSettings/categories/integration/DocumentService/index.js

@@ -12,6 +12,7 @@ import {
   Text,
 } from "@docspace/components";
 import toastr from "@docspace/components/toast/toastr";
+import Loaders from "@docspace/common/components/Loaders";
 
 const URL_REGEX = /^https?:\/\/[-a-zA-Z0-9@:%._\+~#=]{1,256}\/?$/;
 const EDITOR_URL_PLACEHOLDER = `${window.location.protocol}//<editors-dns-name>/`;
@@ -22,8 +23,9 @@ const DocumentService = ({
   currentColorScheme,
   integrationSettingsUrl,
 }) => {
-  const { t } = useTranslation(["Settings", "Common"]);
+  const { t, ready } = useTranslation(["Settings", "Common"]);
 
+  const [isLoading, setIsLoading] = useState(true);
   const [isSaveLoading, setSaveIsLoading] = useState(false);
   const [isResetLoading, setResetIsLoading] = useState(false);
 
@@ -40,6 +42,7 @@ const DocumentService = ({
   const [initInternalUrl, setInitInternalUrl] = useState("");
 
   useEffect(() => {
+    setIsLoading(true);
     getDocumentServiceLocation()
       .then((result) => {
         setIsDefaultSettiings(result?.isDefault || false);
@@ -52,7 +55,8 @@ const DocumentService = ({
         setInitInternalUrl(result?.docServiceUrlInternal);
         setInitDocServiceUrl(result?.docServiceUrl);
       })
-      .catch((error) => toastr.error(error));
+      .catch((error) => toastr.error(error))
+      .finally(() => setIsLoading(false));
   }, []);
 
   const onChangeDocServiceUrl = (e) => {
@@ -127,6 +131,8 @@ const DocumentService = ({
     internalUrl == initInternalUrl &&
     portalUrl == initPortalUrl;
 
+  if (isLoading || !ready) return <Loaders.SettingsDSConnect />;
+
   return (
     <Styled.Location>
       <Styled.LocationHeader>

packages/common/components/Loaders/SettingsLoader/SettingsDSConnectLoader.js

@@ -0,0 +1,190 @@
+import React from "react";
+import { LoaderStyle } from "../../../constants";
+import RectangleLoader from "../RectangleLoader";
+import { StyledSMTPContent } from "./StyledComponent";
+const speed = 2;
+
+const SettingsDSConnect = () => {
+  const firstComponent = (
+    <div>
+      <div>
+        <RectangleLoader
+          height="22"
+          width="56"
+          backgroundColor={LoaderStyle.backgroundColor}
+          foregroundColor={LoaderStyle.foregroundColor}
+          backgroundOpacity={LoaderStyle.backgroundOpacity}
+          foregroundOpacity={LoaderStyle.foregroundOpacity}
+          speed={speed}
+          animate={true}
+        />
+      </div>
+
+      <RectangleLoader
+        className="rectangle-loader-2"
+        height="46"
+        width="348"
+        backgroundColor={LoaderStyle.backgroundColor}
+        foregroundColor={LoaderStyle.foregroundColor}
+        backgroundOpacity={LoaderStyle.backgroundOpacity}
+        foregroundOpacity={LoaderStyle.foregroundOpacity}
+        speed={speed}
+        animate={true}
+      />
+    </div>
+  );
+
+  const secondComponent = (
+    <div>
+      <RectangleLoader
+        height="20"
+        width="101"
+        backgroundColor={LoaderStyle.backgroundColor}
+        foregroundColor={LoaderStyle.foregroundColor}
+        backgroundOpacity={LoaderStyle.backgroundOpacity}
+        foregroundOpacity={LoaderStyle.foregroundOpacity}
+        speed={speed}
+        animate={true}
+      />
+      <RectangleLoader
+        className="rectangle-loader-2"
+        height="32"
+        backgroundColor={LoaderStyle.backgroundColor}
+        foregroundColor={LoaderStyle.foregroundColor}
+        backgroundOpacity={LoaderStyle.backgroundOpacity}
+        foregroundOpacity={LoaderStyle.foregroundOpacity}
+        speed={speed}
+        animate={true}
+      />
+    </div>
+  );
+  const thirdComponent = (
+    <div>
+      <RectangleLoader
+        height="20"
+        width="138"
+        backgroundColor={LoaderStyle.backgroundColor}
+        foregroundColor={LoaderStyle.foregroundColor}
+        backgroundOpacity={LoaderStyle.backgroundOpacity}
+        foregroundOpacity={LoaderStyle.foregroundOpacity}
+        speed={speed}
+        animate={true}
+      />
+      <RectangleLoader
+        className="rectangle-loader-2"
+        height="32"
+        backgroundColor={LoaderStyle.backgroundColor}
+        foregroundColor={LoaderStyle.foregroundColor}
+        backgroundOpacity={LoaderStyle.backgroundOpacity}
+        foregroundOpacity={LoaderStyle.foregroundOpacity}
+        speed={speed}
+        animate={true}
+      />
+    </div>
+  );
+
+  const checkboxComponent = (
+    <div className="rectangle-loader_checkbox">
+      <RectangleLoader
+        height="16"
+        width="16"
+        backgroundColor={LoaderStyle.backgroundColor}
+        foregroundColor={LoaderStyle.foregroundColor}
+        backgroundOpacity={LoaderStyle.backgroundOpacity}
+        foregroundOpacity={LoaderStyle.foregroundOpacity}
+        speed={speed}
+        animate={true}
+      />
+      <RectangleLoader
+        height="22"
+        width="101"
+        backgroundColor={LoaderStyle.backgroundColor}
+        foregroundColor={LoaderStyle.foregroundColor}
+        backgroundOpacity={LoaderStyle.backgroundOpacity}
+        foregroundOpacity={LoaderStyle.foregroundOpacity}
+        speed={speed}
+        animate={true}
+      />
+    </div>
+  );
+  const secondCheckboxComponent = (
+    <div className="rectangle-loader_checkbox">
+      <RectangleLoader
+        height="16"
+        width="16"
+        backgroundColor={LoaderStyle.backgroundColor}
+        foregroundColor={LoaderStyle.foregroundColor}
+        backgroundOpacity={LoaderStyle.backgroundOpacity}
+        foregroundOpacity={LoaderStyle.foregroundOpacity}
+        speed={speed}
+        animate={true}
+      />
+      <RectangleLoader
+        height="20"
+        width="70"
+        backgroundColor={LoaderStyle.backgroundColor}
+        foregroundColor={LoaderStyle.foregroundColor}
+        backgroundOpacity={LoaderStyle.backgroundOpacity}
+        foregroundOpacity={LoaderStyle.foregroundOpacity}
+        speed={speed}
+        animate={true}
+      />
+    </div>
+  );
+  const buttonsComponent = (
+    <div className="rectangle-loader_buttons">
+      <RectangleLoader
+        height="32"
+        backgroundColor={LoaderStyle.backgroundColor}
+        foregroundColor={LoaderStyle.foregroundColor}
+        backgroundOpacity={LoaderStyle.backgroundOpacity}
+        foregroundOpacity={LoaderStyle.foregroundOpacity}
+        speed={speed}
+        animate={true}
+      />
+      <RectangleLoader
+        height="32"
+        backgroundColor={LoaderStyle.backgroundColor}
+        foregroundColor={LoaderStyle.foregroundColor}
+        backgroundOpacity={LoaderStyle.backgroundOpacity}
+        foregroundOpacity={LoaderStyle.foregroundOpacity}
+        speed={speed}
+        animate={true}
+      />
+    </div>
+  );
+  return (
+    <StyledSMTPContent>
+      <RectangleLoader
+        className="rectangle-loader_title"
+        height="22"
+        width="128"
+        backgroundColor={LoaderStyle.backgroundColor}
+        foregroundColor={LoaderStyle.foregroundColor}
+        backgroundOpacity={LoaderStyle.backgroundOpacity}
+        foregroundOpacity={LoaderStyle.foregroundOpacity}
+        speed={speed}
+        animate={true}
+      />
+
+      <RectangleLoader
+        className="rectangle-loader_description"
+        height="40"
+        backgroundColor={LoaderStyle.backgroundColor}
+        foregroundColor={LoaderStyle.foregroundColor}
+        backgroundOpacity={LoaderStyle.backgroundOpacity}
+        foregroundOpacity={LoaderStyle.foregroundOpacity}
+        speed={speed}
+        animate={true}
+      />
+
+      {firstComponent}
+      {firstComponent}
+      {firstComponent}
+
+      {buttonsComponent}
+    </StyledSMTPContent>
+  );
+};
+
+export default SettingsDSConnect;

packages/common/components/Loaders/index.js

@@ -49,6 +49,7 @@ import SettingsHeader from "./SettingsLoader/SettingsHeaderLoader";
 import SettingsAdmin from "./SettingsLoader/SettingsAdminLoader";
 import SettingsCommon from "./SettingsLoader/SettingsCommonLoader";
 import SettingsSMTP from "./SettingsLoader/SettingsSMTPLoader";
+import SettingsDSConnect from "./SettingsLoader/SettingsDSConnectLoader";
 import EmptyContainerLoader from "./EmptyContainerLoader/EmptyContainerLoader";
 import ContextMenuLoader from "./ContextMenuLoader";
 
@@ -103,6 +104,7 @@ export default {
   SettingsAdmin,
   SettingsCommon,
   SettingsSMTP,
+  SettingsDSConnect,
 
   EmptyContainerLoader,
   Notifications,