3811 add accounts loader (#3829)

* rename exports

* rename exports

* fix css

* done

* updating image

packages/twenty-front/src/pages/settings/accounts/SettingsAccountLoader.tsx

@@ -0,0 +1,19 @@
+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';
+
+export const SettingsAccountLoader = () => (
+  <AnimatedPlaceholderEmptyContainer>
+    <AnimatedPlaceholder type="loadingAccounts" />
+    <AnimatedPlaceholderEmptyTextContainer>
+      <AnimatedPlaceholderEmptyTitle>
+        Loading account(s)
+      </AnimatedPlaceholderEmptyTitle>
+      <Loader />
+    </AnimatedPlaceholderEmptyTextContainer>
+  </AnimatedPlaceholderEmptyContainer>
+);

packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx

@@ -1,17 +1,47 @@
+import { useRecoilValue } from 'recoil';
+
+import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsAccountsConnectedAccountsSection } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsSection';
 import { SettingsAccountsSettingsSection } from '@/settings/accounts/components/SettingsAccountsSettingsSection';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { IconSettings } from '@/ui/display/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import { SettingsAccountLoader } from '~/pages/settings/accounts/SettingsAccountLoader';
 
 export const SettingsAccounts = () => {
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+
+  const { records: accounts, loading } = useFindManyRecords<ConnectedAccount>({
+    objectNameSingular: 'connectedAccount',
+    filter: {
+      accountOwnerId: {
+        eq: currentWorkspaceMember?.id,
+      },
+    },
+  });
+
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-      <SettingsPageContainer>
+      <SettingsPageContainer
+        style={
+          loading
+            ? { height: '100%', boxSizing: 'border-box', width: '100%' }
+            : {}
+        }
+      >
         <Breadcrumb links={[{ children: 'Accounts' }]} />
-        <SettingsAccountsConnectedAccountsSection />
-        <SettingsAccountsSettingsSection />
+
+        {loading ? (
+          <SettingsAccountLoader />
+        ) : (
+          <>
+            <SettingsAccountsConnectedAccountsSection accounts={accounts} />
+            <SettingsAccountsSettingsSection />
+          </>
+        )}
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );