message folder ui enhancement (#16181)

packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsAccountsMessageFoldersCard.tsx

@@ -5,6 +5,7 @@ import { useGenerateDepthRecordGqlFieldsFromObject } from '@/object-record/graph
 import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { SettingsMessageFoldersEmptyStateCard } from '@/settings/accounts/components/message-folders/SettingsMessageFoldersEmptyStateCard';
+import { SettingsMessageFoldersSkeletonLoader } from '@/settings/accounts/components/message-folders/SettingsMessageFoldersSkeletonLoader';
 import { SettingsMessageFoldersTreeItem } from '@/settings/accounts/components/message-folders/SettingsMessageFoldersTreeItem';
 import { computeMessageFolderTree } from '@/settings/accounts/components/message-folders/utils/computeMessageFolderTree';
 import { settingsAccountsSelectedMessageChannelState } from '@/settings/accounts/states/settingsAccountsSelectedMessageChannelState';
@@ -52,7 +53,7 @@ const StyledSectionHeader = styled.div`
   display: flex;
   height: ${({ theme }) => theme.spacing(6)};
   justify-content: space-between;
-  padding: 0 ${({ theme }) => theme.spacing(1)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
   text-align: left;
 `;
 
@@ -80,7 +81,7 @@ export const SettingsAccountsMessageFoldersCard = () => {
     shouldOnlyLoadRelationIdentifiers: false,
   });
 
-  const { record: messageChannel } = useFindOneRecord<MessageChannel>({
+  const { record: messageChannel, loading } = useFindOneRecord<MessageChannel>({
     objectNameSingular: CoreObjectNameSingular.MessageChannel,
     objectRecordId: settingsAccountsSelectedMessageChannel?.id,
     recordGqlFields,
@@ -127,6 +128,16 @@ export const SettingsAccountsMessageFoldersCard = () => {
     });
   };
 
+  if (loading) {
+    return (
+      <Section>
+        <Table>
+          <SettingsMessageFoldersSkeletonLoader />
+        </Table>
+      </Section>
+    );
+  }
+
   if (!messageFolders || messageFolders.length === 0) {
     return <SettingsMessageFoldersEmptyStateCard />;
   }

packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsMessageFoldersSkeletonLoader.tsx

@@ -0,0 +1,67 @@
+import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+
+const StyledSkeletonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+  padding: ${({ theme }) => theme.spacing(2)} 0;
+`;
+
+const StyledSkeletonRow = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledSkeletonFolderInfo = styled.div`
+  align-items: center;
+  display: flex;
+  flex: 1;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const SKELETON_ROWS = [
+  { width: 160 },
+  { width: 120 },
+  { width: 180 },
+  { width: 140 },
+  { width: 100 },
+  { width: 150 },
+];
+
+export const SettingsMessageFoldersSkeletonLoader = () => {
+  const theme = useTheme();
+
+  return (
+    <SkeletonTheme
+      baseColor={theme.background.tertiary}
+      highlightColor={theme.background.transparent.lighter}
+      borderRadius={4}
+    >
+      <StyledSkeletonContainer>
+        {SKELETON_ROWS.map((row, index) => (
+          <StyledSkeletonRow key={index}>
+            <StyledSkeletonFolderInfo>
+              <Skeleton
+                width={20}
+                height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
+              />
+              <Skeleton
+                width={row.width}
+                height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
+              />
+            </StyledSkeletonFolderInfo>
+            <Skeleton
+              width={16}
+              height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
+            />
+          </StyledSkeletonRow>
+        ))}
+      </StyledSkeletonContainer>
+    </SkeletonTheme>
+  );
+};