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

3706 add email loader (#3731)

Browse Source 
* add images

* update component

* wip

* add loader cntainer

* wip

* Loader is working

* fix color and keyframes

* change loading message for threads
This commit is contained in:
bosiraphael
2024-02-01 10:15:41 +01:00
committed by GitHub
parent fc01c8cd4f
commit bd5d930be2
7 changed files with 84 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/twenty-front/src/modules/activities/emails/components/EmailLoader.tsx Normal file
View File

@ -0,0 +1,17 @@
import { Loader } from '@/ui/feedback/loader/components/Loader';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
StyledEmptyContainer,
StyledEmptyTextContainer,
StyledEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
export const EmailLoader = ({ loadingText }: { loadingText?: string }) => (
<StyledEmptyContainer>
<AnimatedPlaceholder type="loadingMessages" />
<StyledEmptyTextContainer>
<StyledEmptyTitle>{loadingText || 'Loading emails'}</StyledEmptyTitle>
<Loader />
</StyledEmptyTextContainer>
</StyledEmptyContainer>
);

5
packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx
View File

@ -3,6 +3,7 @@ import { useQuery } from '@apollo/client';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { EmailLoader } from '@/activities/emails/components/EmailLoader';
import { EmailThreadFetchMoreLoader } from '@/activities/emails/components/EmailThreadFetchMoreLoader';
import { EmailThreadPreview } from '@/activities/emails/components/EmailThreadPreview';
import { TIMELINE_THREADS_DEFAULT_PAGE_SIZE } from '@/activities/emails/constants/messaging.constants';
@ -148,6 +149,10 @@ export const EmailThreads = ({
const { totalNumberOfThreads, timelineThreads }: TimelineThreadsWithTotal =
data?.[queryName] ?? [];
if (firstQueryLoading) {
return <EmailLoader />;
}
if (!firstQueryLoading && !timelineThreads?.length) {
return (
<StyledEmptyContainer>