From 139c1f2cb3d2a2aa57b052026d1e3da430582e87 Mon Sep 17 00:00:00 2001
From: Timofey Boyko <timofey.boyko@onlyoffice.com>
Date: Tue, 14 Nov 2023 18:43:26 +0300
Subject: [PATCH] Client:OAuth2:EditForm: add loader

---
 .../ClientForm/ClientForm.styled.ts           |  16 +-
 .../ClientForm/ClientForm.types.ts            |   5 +-
 .../sub-components/ClientForm/Loader.tsx      | 302 ++++++++++++++++++
 .../OAuth/sub-components/ClientForm/index.tsx |   6 +-
 4 files changed, 325 insertions(+), 4 deletions(-)
 create mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/Loader.tsx

diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.styled.ts b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.styled.ts
index 3e89828e0d..c7d08456bd 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.styled.ts
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.styled.ts
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-import { mobile, tablet } from "@docspace/components/utils/device";
+import { mobile } from "@docspace/components/utils/device";
 
 const StyledContainer = styled.div`
   width: 100%;
@@ -10,6 +10,20 @@ const StyledContainer = styled.div`
   flex-direction: column;
 
   gap: 24px;
+
+  .loader {
+    rect {
+      width: 100%;
+    }
+  }
+
+  .scope-name-loader {
+    margin-bottom: 4px;
+  }
+
+  .scope-desc-loader {
+    margin-bottom: 2px;
+  }
 `;
 
 const StyledBlock = styled.div`
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.types.ts b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.types.ts
index 3d17c4ca87..735ec0118f 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.types.ts
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.types.ts
@@ -5,6 +5,7 @@ import {
   IClientReqDTO,
   IScope,
 } from "@docspace/common/utils/oauth/interfaces";
+import { DeviceUnionType } from "@docspace/common/hooks/useViewEffect";
 
 export interface InputProps {
   value: string;
@@ -52,10 +53,10 @@ export interface ClientFormProps {
 
   regenerateSecret?: (clientId: string) => Promise<string>;
 
-  currentDeviceType?: string;
+  currentDeviceType?: DeviceUnionType;
 }
 
 export interface ClientStore {
-  auth: { settingsStore: { currentDeviceType: string } };
+  auth: { settingsStore: { currentDeviceType: DeviceUnionType } };
   oauthStore: OAuthStoreProps;
 }
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/Loader.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/Loader.tsx
new file mode 100644
index 0000000000..72a9a7315b
--- /dev/null
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/Loader.tsx
@@ -0,0 +1,302 @@
+import React from "react";
+
+//@ts-ignore
+import RectangleLoader from "@docspace/common/components/Loaders/RectangleLoader";
+import { DeviceUnionType } from "@docspace/common/hooks/useViewEffect";
+
+import {
+  StyledBlock,
+  StyledButtonContainer,
+  StyledContainer,
+  StyledHeaderRow,
+  StyledInputBlock,
+  StyledInputGroup,
+  StyledInputRow,
+  StyledScopesCheckbox,
+  StyledScopesContainer,
+  StyledScopesName,
+} from "./ClientForm.styled";
+
+const HelpButtonSkeleton = () => {
+  return <RectangleLoader width={"12px"} height={"12px"} />;
+};
+
+const CheckboxSkeleton = ({ className }: { className?: string }) => {
+  return (
+    <RectangleLoader className={className} width={"16px"} height={"16px"} />
+  );
+};
+
+const ClientFormLoader = ({
+  currentDeviceType,
+  isEdit,
+}: {
+  currentDeviceType?: DeviceUnionType;
+  isEdit: boolean;
+}) => {
+  const buttonHeight = currentDeviceType !== "desktop" ? "40px" : "32px";
+
+  return (
+    <StyledContainer>
+      <StyledBlock>
+        <StyledHeaderRow>
+          <RectangleLoader width={"78px"} height={"16px"} />
+        </StyledHeaderRow>
+        <StyledInputBlock>
+          <StyledInputGroup>
+            <StyledHeaderRow>
+              <RectangleLoader width={"65px"} height={"13px"} />
+            </StyledHeaderRow>
+            <StyledInputRow>
+              <RectangleLoader width={"100%"} height={"32px"} />
+            </StyledInputRow>
+          </StyledInputGroup>
+          <StyledInputGroup>
+            <StyledHeaderRow>
+              <RectangleLoader width={"80px"} height={"13px"} />
+            </StyledHeaderRow>
+            <StyledInputRow>
+              <RectangleLoader width={"100%"} height={"32px"} />
+            </StyledInputRow>
+          </StyledInputGroup>
+          <StyledInputGroup>
+            <div className="label">
+              <RectangleLoader width={"60px"} height={"13px"} />
+            </div>
+            <div className="select">
+              <RectangleLoader width={"32px"} height={"32px"} />
+              <RectangleLoader width={"32px"} height={"32px"} />
+              <RectangleLoader width={"109px"} height={"13px"} />
+            </div>
+            <RectangleLoader width={"130px"} height={"12px"} />
+          </StyledInputGroup>
+          <StyledInputGroup>
+            <StyledHeaderRow>
+              <RectangleLoader width={"75px"} height={"13px"} />
+            </StyledHeaderRow>
+            <StyledInputRow>
+              <RectangleLoader width={"100%"} height={"60px"} />
+            </StyledInputRow>
+          </StyledInputGroup>
+        </StyledInputBlock>
+      </StyledBlock>
+      {isEdit && (
+        <StyledBlock>
+          <StyledHeaderRow>
+            <RectangleLoader width={"47px"} height={"16px"} />
+            <HelpButtonSkeleton />
+          </StyledHeaderRow>
+          <StyledInputBlock>
+            <StyledInputGroup>
+              <StyledHeaderRow>
+                <RectangleLoader width={"96px"} height={"13px"} />
+              </StyledHeaderRow>
+              <StyledInputRow>
+                <RectangleLoader width={"100%"} height={"32px"} />
+              </StyledInputRow>
+            </StyledInputGroup>
+            <StyledInputGroup>
+              <StyledHeaderRow>
+                <RectangleLoader width={"60px"} height={"13px"} />
+              </StyledHeaderRow>
+              <StyledInputRow>
+                <RectangleLoader
+                  className={"loader"}
+                  width={"calc(100% - 91px)"}
+                  height={"32px"}
+                />
+                <RectangleLoader width={"91px"} height={"32px"} />
+              </StyledInputRow>
+            </StyledInputGroup>
+          </StyledInputBlock>
+        </StyledBlock>
+      )}
+      <StyledBlock>
+        <StyledHeaderRow>
+          <RectangleLoader width={"96px"} height={"16px"} />
+        </StyledHeaderRow>
+        <StyledInputBlock>
+          <StyledInputGroup>
+            <StyledHeaderRow>
+              <RectangleLoader width={"87px"} height={"13px"} />
+              <HelpButtonSkeleton />
+            </StyledHeaderRow>
+            <StyledInputRow>
+              <RectangleLoader
+                className={"loader"}
+                width={"calc(100% - 40px)"}
+                height={"32px"}
+              />
+              <RectangleLoader width={"32px"} height={"32px"} />
+            </StyledInputRow>
+            <RectangleLoader width={"162px"} height={"32px"} />
+          </StyledInputGroup>
+          <StyledInputGroup>
+            <StyledHeaderRow>
+              <RectangleLoader width={"96px"} height={"13px"} />
+              <HelpButtonSkeleton />
+            </StyledHeaderRow>
+            <StyledInputRow>
+              <RectangleLoader
+                className={"loader"}
+                width={"calc(100% - 40px)"}
+                height={"32px"}
+              />
+              <RectangleLoader width={"32px"} height={"32px"} />
+            </StyledInputRow>
+            <RectangleLoader width={"162px"} height={"32px"} />
+          </StyledInputGroup>
+        </StyledInputBlock>
+      </StyledBlock>
+      <StyledScopesContainer>
+        <StyledHeaderRow className="header">
+          <RectangleLoader width={"111px"} height={"16px"} />
+          <HelpButtonSkeleton />
+        </StyledHeaderRow>
+        <RectangleLoader className="header" width={"34px"} height={"16px"} />
+        <RectangleLoader
+          className="header header-last"
+          width={"37px"}
+          height={"16px"}
+        />
+        <StyledScopesName>
+          <RectangleLoader
+            className="scope-name-loader"
+            width={"98px"}
+            height={"14px"}
+          />
+          <RectangleLoader
+            className={"scope-desc-loader"}
+            width={"200px"}
+            height={"12px"}
+          />
+          <RectangleLoader
+            className={"scope-desc-loader"}
+            width={"230px"}
+            height={"12px"}
+          />
+        </StyledScopesName>
+
+        <StyledScopesCheckbox>
+          <CheckboxSkeleton className="checkbox-read" />
+        </StyledScopesCheckbox>
+
+        <StyledScopesCheckbox>
+          <CheckboxSkeleton />
+        </StyledScopesCheckbox>
+        <StyledScopesName>
+          <RectangleLoader
+            className="scope-name-loader"
+            width={"98px"}
+            height={"14px"}
+          />
+          <RectangleLoader
+            className={"scope-desc-loader"}
+            width={"200px"}
+            height={"12px"}
+          />
+          <RectangleLoader
+            className={"scope-desc-loader"}
+            width={"230px"}
+            height={"12px"}
+          />
+        </StyledScopesName>
+
+        <StyledScopesCheckbox>
+          <CheckboxSkeleton className="checkbox-read" />
+        </StyledScopesCheckbox>
+
+        <StyledScopesCheckbox>
+          <CheckboxSkeleton />
+        </StyledScopesCheckbox>
+        <StyledScopesName>
+          <RectangleLoader
+            className="scope-name-loader"
+            width={"98px"}
+            height={"14px"}
+          />
+          <RectangleLoader
+            className={"scope-desc-loader"}
+            width={"200px"}
+            height={"12px"}
+          />
+          <RectangleLoader
+            className={"scope-desc-loader"}
+            width={"230px"}
+            height={"12px"}
+          />
+        </StyledScopesName>
+
+        <StyledScopesCheckbox>
+          <CheckboxSkeleton className="checkbox-read" />
+        </StyledScopesCheckbox>
+
+        <StyledScopesCheckbox>
+          <CheckboxSkeleton />
+        </StyledScopesCheckbox>
+        <StyledScopesName>
+          <RectangleLoader
+            className="scope-name-loader"
+            width={"98px"}
+            height={"14px"}
+          />
+          <RectangleLoader
+            className={"scope-desc-loader"}
+            width={"200px"}
+            height={"12px"}
+          />
+          <RectangleLoader
+            className={"scope-desc-loader"}
+            width={"230px"}
+            height={"12px"}
+          />
+        </StyledScopesName>
+
+        <StyledScopesCheckbox>
+          <CheckboxSkeleton className="checkbox-read" />
+        </StyledScopesCheckbox>
+
+        <StyledScopesCheckbox>
+          <CheckboxSkeleton />
+        </StyledScopesCheckbox>
+      </StyledScopesContainer>
+      <StyledBlock>
+        <StyledHeaderRow>
+          <RectangleLoader width={"162px"} height={"16px"} />
+        </StyledHeaderRow>
+        <StyledInputBlock>
+          <StyledInputGroup>
+            <StyledHeaderRow>
+              <RectangleLoader width={"114px"} height={"13px"} />
+              <HelpButtonSkeleton />
+            </StyledHeaderRow>
+            <StyledInputRow>
+              <RectangleLoader width={"100%"} height={"32px"} />
+            </StyledInputRow>
+          </StyledInputGroup>
+          <StyledInputGroup>
+            <StyledHeaderRow>
+              <RectangleLoader width={"96px"} height={"13px"} />
+              <HelpButtonSkeleton />
+            </StyledHeaderRow>
+            <StyledInputRow>
+              <RectangleLoader width={"100%"} height={"32px"} />
+            </StyledInputRow>
+          </StyledInputGroup>
+        </StyledInputBlock>
+      </StyledBlock>
+      <StyledButtonContainer>
+        <RectangleLoader
+          width={currentDeviceType === "desktop" ? "86px" : "100%"}
+          height={buttonHeight}
+        />
+        <RectangleLoader
+          width={currentDeviceType === "desktop" ? "86px" : "100%"}
+          height={buttonHeight}
+        />
+      </StyledButtonContainer>
+    </StyledContainer>
+  );
+};
+
+export default ClientFormLoader;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx
index e15c82a5c5..c9ce9d11b5 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx
@@ -18,6 +18,7 @@ import ButtonsBlock from "./components/ButtonsBlock";
 import { StyledContainer } from "./ClientForm.styled";
 
 import { ClientFormProps, ClientStore } from "./ClientForm.types";
+import ClientFormLoader from "./Loader";
 
 const ClientForm = ({
   id,
@@ -237,7 +238,10 @@ const ClientForm = ({
   return (
     <StyledContainer>
       {isLoading ? (
-        <div> Loading...</div>
+        <ClientFormLoader
+          isEdit={isEdit}
+          currentDeviceType={currentDeviceType}
+        />
       ) : (
         <>
           <BasicBlock