From e49db63f30d4a766c848a14c52bbad99c8dd21f4 Mon Sep 17 00:00:00 2001
From: rostaklein <r.klein@make.com>
Date: Mon, 3 Jun 2024 15:14:08 +0200
Subject: [PATCH] accounts page loader as skeleton (#5702)

fixes https://github.com/twentyhq/twenty/issues/5659



https://github.com/twentyhq/twenty/assets/19856731/aeae6f08-bc6e-4d71-9067-39b6382ebf15
---
 .../components/SettingsAccountLoader.tsx      | 32 ++++++++-----------
 .../settings/accounts/SettingsAccounts.tsx    |  8 +----
 2 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountLoader.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountLoader.tsx
index 8c68acdac..89c31e34c 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountLoader.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountLoader.tsx
@@ -1,19 +1,15 @@
-import { Loader } from '@/ui/feedback/loader/components/Loader';
-import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
-import {
-  AnimatedPlaceholderEmptyContainer,
-  AnimatedPlaceholderEmptyTextContainer,
-  AnimatedPlaceholderEmptyTitle,
-} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+import { useTheme } from '@emotion/react';
 
-export const SettingsAccountLoader = () => (
-  <AnimatedPlaceholderEmptyContainer>
-    <AnimatedPlaceholder type="loadingAccounts" />
-    <AnimatedPlaceholderEmptyTextContainer>
-      <AnimatedPlaceholderEmptyTitle>
-        Loading account(s)
-      </AnimatedPlaceholderEmptyTitle>
-      <Loader />
-    </AnimatedPlaceholderEmptyTextContainer>
-  </AnimatedPlaceholderEmptyContainer>
-);
+export const SettingsAccountLoader = () => {
+  const theme = useTheme();
+  return (
+    <SkeletonTheme
+      baseColor={theme.background.tertiary}
+      highlightColor={theme.background.transparent.lighter}
+      borderRadius={4}
+    >
+      <Skeleton height={20} width={512} />
+    </SkeletonTheme>
+  );
+};
diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx
index 17766adb6..484a0a681 100644
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx
@@ -38,13 +38,7 @@ export const SettingsAccounts = () => {
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-      <SettingsPageContainer
-        style={
-          loading
-            ? { height: '100%', boxSizing: 'border-box', width: '100%' }
-            : {}
-        }
-      >
+      <SettingsPageContainer>
         <Breadcrumb links={[{ children: 'Accounts' }]} />
 
         {loading ? (