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

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>
+  );
+};

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 ? (