Shared:Components:AppLoader: Rewrite to typescript

packages/client/src/components/System/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import AppLoader from "@docspace/common/components/AppLoader";
+import AppLoader from "@docspace/shared/components/app-loader";
 import ErrorBoundary from "@docspace/common/components/ErrorBoundary";
 import Error520 from "client/Error520";
 import Error404 from "client/Error404";
@@ -92,7 +92,7 @@ const System = (props) => {
   }
 
   const Component = React.lazy(
-    loadComponent(props.system.scope, props.system.module)
+    loadComponent(props.system.scope, props.system.module),
   );
 
   return (

packages/client/src/pages/PortalSettings/categories/data-management/index.js

@@ -12,7 +12,7 @@ import { Text } from "@docspace/shared/components/text";
 import { Box } from "@docspace/shared/components/box";
 import { HelpButton } from "@docspace/shared/components/help-button";
 import { combineUrl } from "@docspace/shared/utils/combineUrl";
-import AppLoader from "@docspace/common/components/AppLoader";
+import AppLoader from "@docspace/shared/components/app-loader";
 import { removeLocalStorage } from "../../utils";
 import config from "../../../../../package.json";
 import ManualBackup from "./backup/manual-backup";
@@ -47,7 +47,7 @@ const DataManagementWrapper = (props) => {
 
   const renderTooltip = (helpInfo, className) => {
     const isAutoBackupPage = window.location.pathname.includes(
-      "portal-settings/backup/auto-backup"
+      "portal-settings/backup/auto-backup",
     );
     return (
       <>
@@ -112,7 +112,7 @@ const DataManagementWrapper = (props) => {
       ? `/backup/${e.id}`
       : `/portal-settings/backup/${e.id}`;
     navigate(
-      combineUrl(window.DocSpaceConfig?.proxy?.url, config.homepage, url)
+      combineUrl(window.DocSpaceConfig?.proxy?.url, config.homepage, url),
     );
   };
 
@@ -156,5 +156,5 @@ export default inject(
       currentColorScheme,
       toDefault,
     };
-  }
+  },
 )(withTranslation(["Settings", "Common"])(observer(DataManagementWrapper)));

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

@@ -15,7 +15,7 @@ import Api from "./Api";
 
 import { useTranslation } from "react-i18next";
 import { isMobile, isMobileOnly } from "react-device-detect";
-import AppLoader from "@docspace/common/components/AppLoader";
+import AppLoader from "@docspace/shared/components/app-loader";
 import SSOLoader from "./sub-components/ssoLoader";
 import { WebhookConfigsLoader } from "./Webhooks/sub-components/Loaders";
 import { DeviceType } from "@docspace/shared/enums";
@@ -87,7 +87,7 @@ const DeveloperToolsWrapper = (props) => {
   ];
 
   const [currentTab, setCurrentTab] = useState(
-    data.findIndex((item) => location.pathname.includes(item.id))
+    data.findIndex((item) => location.pathname.includes(item.id)),
   );
 
   const load = async () => {
@@ -111,8 +111,8 @@ const DeveloperToolsWrapper = (props) => {
       combineUrl(
         window.DocSpaceConfig?.proxy?.url,
         config.homepage,
-        `/portal-settings/developer-tools/${e.id}`
-      )
+        `/portal-settings/developer-tools/${e.id}`,
+      ),
     );
   };
 

packages/client/src/pages/Sdk/index.js

@@ -1,7 +1,7 @@
 import { useEffect, useState, useCallback } from "react";
 import { inject, observer } from "mobx-react";
 import { useParams } from "react-router-dom";
-import AppLoader from "@docspace/common/components/AppLoader";
+import AppLoader from "@docspace/shared/components/app-loader";
 import RoomSelector from "@docspace/shared/selectors/Room";
 import FilesSelector from "../../components/FilesSelector";
 import {
@@ -40,12 +40,12 @@ const Sdk = ({
 
   const callCommand = useCallback(
     () => frameCallCommand("setConfig"),
-    [frameCallCommand]
+    [frameCallCommand],
   );
 
   const callCommandLoad = useCallback(
     () => frameCallCommand("setIsLoaded"),
-    [frameCallCommand]
+    [frameCallCommand],
   );
 
   useEffect(() => {
@@ -62,7 +62,7 @@ const Sdk = ({
 
   const { mode } = useParams();
   const selectorType = new URLSearchParams(window.location.search).get(
-    "selectorType"
+    "selectorType",
   );
 
   const toRelativeUrl = (data) => {
@@ -162,7 +162,7 @@ const Sdk = ({
 
       frameCallEvent({ event: "onSelectCallback", data });
     },
-    [frameCallEvent]
+    [frameCallEvent],
   );
 
   const onSelectFile = useCallback(
@@ -179,7 +179,7 @@ const Sdk = ({
 
       frameCallEvent({ event: "onSelectCallback", data });
     },
-    [frameCallEvent]
+    [frameCallEvent],
   );
 
   const onClose = useCallback(() => {
@@ -263,5 +263,5 @@ export default inject(
       fetchExternalLinks,
       getFilePrimaryLink,
     };
-  }
+  },
 )(observer(Sdk));

packages/common/components/PrivateRoute/index.js

@@ -4,7 +4,7 @@ import { Navigate, useLocation } from "react-router-dom";
 import { inject, observer } from "mobx-react";
 import Error403 from "client/Error403";
 
-import AppLoader from "../AppLoader";
+import AppLoader from "@docspace/shared/components/app-loader";
 
 import { combineUrl } from "@docspace/shared/utils/combineUrl";
 import { TenantStatus } from "@docspace/shared/enums";

packages/shared/components/app-loader/AppLoader.styled.ts

@@ -1,10 +1,8 @@
-import React from "react";
 import styled from "styled-components";
-import { Loader } from "@docspace/shared/components/loader";
 
 import { Base } from "@docspace/shared/themes";
 
-const StyledContainer = styled.div`
+export const StyledContainer = styled.div`
   // width: 100vw;
   // height: 100vh;
   overflow: hidden;
@@ -18,11 +16,3 @@ const StyledContainer = styled.div`
 `;
 
 StyledContainer.defaultProps = { theme: Base };
-
-const AppLoader = () => (
-  <StyledContainer>
-    <Loader className="pageLoader" type="rombs" size="40px" />
-  </StyledContainer>
-);
-
-export default AppLoader;

packages/shared/components/app-loader/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Loader, LoaderTypes } from "../loader";
+
+import { StyledContainer } from "./AppLoader.styled";
+
+const AppLoader = () => (
+  <StyledContainer>
+    <Loader className="pageLoader" type={LoaderTypes.rombs} size="40px" />
+  </StyledContainer>
+);
+
+export default AppLoader;