twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-24 06:48:42 +03:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 33 additions and 15 deletions
Show Stats 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 { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsAccountEmailsSkeletonCard } from '@/settings/accounts/components/SettingsAccountEmailsSkeletonCard';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Section } from '@/ui/layout/section/components/Section';
@ -13,23 +14,25 @@ import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard
export const SettingsAccountsEmailsSyncSection = () => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const accounts = useFindManyRecords<ConnectedAccount>({
objectNameSingular: 'connectedAccount',
filter: {
accountOwnerId: {
eq: currentWorkspaceMember?.id,
const { records: accounts, loading: accountsLoading } =
useFindManyRecords<ConnectedAccount>({
objectNameSingular: 'connectedAccount',
filter: {
accountOwnerId: {
eq: currentWorkspaceMember?.id,
},
},
},
}).records;
});
const messageChannels = useFindManyRecords<MessageChannel>({
objectNameSingular: 'messageChannel',
filter: {
connectedAccountId: {
in: accounts.map((account) => account.id),
const { records: messageChannels, loading: messageChannelsLoading } =
useFindManyRecords<MessageChannel>({
objectNameSingular: 'messageChannel',
filter: {
connectedAccountId: {
in: accounts.map((account) => account.id),
},
},
},
}).records;
});
const messageChannelsWithSyncedEmails = messageChannels.map(
(messageChannel) => ({
@ -38,13 +41,18 @@ export const SettingsAccountsEmailsSyncSection = () => {
}),
);
const loading = accountsLoading || messageChannelsLoading;
return (
<Section>
<H2Title
title="Emails sync"
description="Sync your inboxes and set your privacy settings"
/>
{accounts.length ? (
{loading ? (
<SettingsAccountEmailsSkeletonCard />
) : accounts.length ? (
<SettingsAccountsEmailsCard
messageChannels={messageChannelsWithSyncedEmails}
/>