Client:OAuth2: add list loader

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/StyledOAuth.ts

@@ -2,5 +2,4 @@ import styled from "styled-components";
 
 export const OAuthContainer = styled.div`
   width: 100%;
-  margin-top: 5px;
 `;

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/index.tsx

@@ -16,6 +16,7 @@ import { OAuthContainer } from "./StyledOAuth";
 import { OAuthProps } from "./OAuth.types";
 import InfoDialog from "./sub-components/InfoDialog";
 import PreviewDialog from "./sub-components/PreviewDialog";
+import OAuthLoader from "./sub-components/List/Loader";
 
 const MIN_LOADER_TIME = 500;
 
@@ -70,7 +71,6 @@ const OAuth = ({
   });
 
   React.useEffect(() => {
-    console.log(isInit);
     if (isInit) return setIsLoading(false);
     startLoadingRef.current = new Date();
     getData();
@@ -84,11 +84,16 @@ const OAuth = ({
     <OAuthContainer>
       <>
         {isLoading ? (
-          <div>Loading...</div>
+          <OAuthLoader viewAs={viewAs} currentDeviceType={currentDeviceType} />
         ) : isEmptyClientList ? (
           <OAuthEmptyScreen t={t} />
         ) : (
-          <List t={t} clients={clientList} viewAs={viewAs} />
+          <List
+            t={t}
+            clients={clientList}
+            viewAs={viewAs}
+            currentDeviceType={currentDeviceType}
+          />
         )}
       </>
       {infoDialogVisible && <InfoDialog visible={infoDialogVisible} />}

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/Loader.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+//@ts-ignore
+import RectangleLoader from "@docspace/common/components/Loaders/RectangleLoader";
+import { DeviceUnionType } from "@docspace/common/hooks/useViewEffect";
+//@ts-ignore
+import Loaders from "@docspace/common/components/Loaders";
+
+//@ts-ignore
+import { ViewAsType } from "SRC_DIR/store/OAuthStore";
+
+import { OAuthContainer } from "../../StyledOAuth";
+import { StyledContainer } from ".";
+
+const OAuthLoader = ({
+  viewAs,
+  currentDeviceType,
+}: {
+  viewAs: ViewAsType;
+  currentDeviceType: DeviceUnionType;
+}) => {
+  const buttonHeight = currentDeviceType !== "desktop" ? "40px" : "32px";
+
+  const listLoader =
+    viewAs === "table" ? <Loaders.TableLoader /> : <Loaders.Rows />;
+
+  return (
+    <OAuthContainer>
+      <StyledContainer>
+        <RectangleLoader
+          className="description"
+          width={"100%"}
+          height={"16px"}
+        />
+        <RectangleLoader
+          className="add-button"
+          width={"220px"}
+          height={buttonHeight}
+        />
+        {listLoader}
+      </StyledContainer>
+    </OAuthContainer>
+  );
+};
+
+export default OAuthLoader;

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/index.tsx

@@ -15,22 +15,20 @@ import TableView from "./TableView";
 import RowView from "./RowView";
 
 import RegisterNewButton from "../RegisterNewButton";
+import { DeviceUnionType } from "@docspace/common/hooks/useViewEffect";
 
-const StyledContainer = styled.div`
+export const StyledContainer = styled.div`
   width: 100%;
 
   display: flex;
   flex-direction: column;
 
-  .header {
-    margin-bottom: 8px;
-  }
-
   .description {
-    margin-bottom: 8px;
+    margin-bottom: 20px;
+    max-width: 700px;
   }
 
-  button {
+  .add-button {
     width: fit-content;
 
     margin-bottom: 12px;
@@ -41,9 +39,10 @@ interface ListProps {
   t: any;
   clients: ClientProps[];
   viewAs: ViewAsType;
+  currentDeviceType: DeviceUnionType;
 }
 
-const List = ({ clients, viewAs }: ListProps) => {
+const List = ({ clients, viewAs, currentDeviceType }: ListProps) => {
   const { t } = useTranslation(["OAuth", "Common"]);
 
   return (
@@ -61,7 +60,7 @@ const List = ({ clients, viewAs }: ListProps) => {
       >
         {t("OAuthAppDescription")}
       </Text>
-      <RegisterNewButton t={t} />
+      <RegisterNewButton t={t} currentDeviceType={currentDeviceType} />
       <Consumer>
         {(context: { sectionWidth: number; sectionHeight: number }) => (
           <>

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/RegisterNewButton/RegisterNewButton.types.ts

@@ -1,3 +1,6 @@
+import { DeviceUnionType } from "@docspace/common/hooks/useViewEffect";
+
 export interface RegisterNewButtonProps {
   t: any;
+  currentDeviceType: DeviceUnionType;
 }

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/RegisterNewButton/index.tsx

@@ -1,11 +1,13 @@
 import { useNavigate } from "react-router-dom";
-import { isMobile } from "react-device-detect";
 
 import Button from "@docspace/components/button";
 
 import { RegisterNewButtonProps } from "./RegisterNewButton.types";
 
-const RegisterNewButton = ({ t }: RegisterNewButtonProps) => {
+const RegisterNewButton = ({
+  t,
+  currentDeviceType,
+}: RegisterNewButtonProps) => {
   const navigate = useNavigate();
 
   const onClick = () => {
@@ -15,7 +17,8 @@ const RegisterNewButton = ({ t }: RegisterNewButtonProps) => {
   return (
     <Button
       //@ts-ignore
-      size={isMobile ? "normal" : "small"}
+      className="add-button"
+      size={currentDeviceType !== "desktop" ? "normal" : "small"}
       label={t("RegisterNewApp")}
       primary={true}
       onClick={onClick}