admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix empty state flashing on SettingsAccountsEmailsSyncSection (#3698)

Browse Source 
fix
This commit is contained in:
bosiraphael
2024-01-30 15:40:14 +01:00
committed by GitHub
parent f68de1a299
commit 2f7f6d3241
2 changed files with 33 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountEmailsSkeletonCard.tsx Normal file
View File

@ -0,0 +1,10 @@
import styled from '@emotion/styled';
import { Card } from '@/ui/layout/card/components/Card';
const StyledCard = styled(Card)`
background-color: ${({ theme }) => theme.background.secondary};
height: 40px;
`;
export const SettingsAccountEmailsSkeletonCard = () => <StyledCard />;

38
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx
View File

@ -4,6 +4,7 @@ import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { MessageChannel } from '@/accounts/types/MessageChannel'; import { MessageChannel } from '@/accounts/types/MessageChannel';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState'; import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords'; import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsAccountEmailsSkeletonCard } from '@/settings/accounts/components/SettingsAccountEmailsSkeletonCard';
import { H2Title } from '@/ui/display/typography/components/H2Title'; import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Section } from '@/ui/layout/section/components/Section'; import { Section } from '@/ui/layout/section/components/Section';
@ -13,23 +14,25 @@ import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard
export const SettingsAccountsEmailsSyncSection = () => { export const SettingsAccountsEmailsSyncSection = () => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const accounts = useFindManyRecords<ConnectedAccount>({ const { records: accounts, loading: accountsLoading } =
objectNameSingular: 'connectedAccount', useFindManyRecords<ConnectedAccount>({
filter: { objectNameSingular: 'connectedAccount',
accountOwnerId: { filter: {
eq: currentWorkspaceMember?.id, accountOwnerId: {
eq: currentWorkspaceMember?.id,
},
}, },
}, });
}).records;
const messageChannels = useFindManyRecords<MessageChannel>({ const { records: messageChannels, loading: messageChannelsLoading } =
objectNameSingular: 'messageChannel', useFindManyRecords<MessageChannel>({
filter: { objectNameSingular: 'messageChannel',
connectedAccountId: { filter: {
in: accounts.map((account) => account.id), connectedAccountId: {
in: accounts.map((account) => account.id),
},
}, },
}, });
}).records;
const messageChannelsWithSyncedEmails = messageChannels.map( const messageChannelsWithSyncedEmails = messageChannels.map(
(messageChannel) => ({ (messageChannel) => ({
@ -38,13 +41,18 @@ export const SettingsAccountsEmailsSyncSection = () => {
}), }),
); );
const loading = accountsLoading || messageChannelsLoading;
return ( return (
<Section> <Section>
<H2Title <H2Title
title="Emails sync" title="Emails sync"
description="Sync your inboxes and set your privacy settings" description="Sync your inboxes and set your privacy settings"
/> />
{accounts.length ? (
{loading ? (
<SettingsAccountEmailsSkeletonCard />
) : accounts.length ? (
<SettingsAccountsEmailsCard <SettingsAccountsEmailsCard
messageChannels={messageChannelsWithSyncedEmails} messageChannels={messageChannelsWithSyncedEmails}
/> />