diff --git a/packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsAccountsMessageFoldersCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsAccountsMessageFoldersCard.tsx index fe1d5a39f6..2f87673cd2 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsAccountsMessageFoldersCard.tsx +++ b/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({ + const { record: messageChannel, loading } = useFindOneRecord({ objectNameSingular: CoreObjectNameSingular.MessageChannel, objectRecordId: settingsAccountsSelectedMessageChannel?.id, recordGqlFields, @@ -127,6 +128,16 @@ export const SettingsAccountsMessageFoldersCard = () => { }); }; + if (loading) { + return ( +
+ + +
+
+ ); + } + if (!messageFolders || messageFolders.length === 0) { return ; } diff --git a/packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsMessageFoldersSkeletonLoader.tsx b/packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsMessageFoldersSkeletonLoader.tsx new file mode 100644 index 0000000000..95340af8b0 --- /dev/null +++ b/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 ( + + + {SKELETON_ROWS.map((row, index) => ( + + + + + + + + ))} + + + ); +};