From bd5d930be22c69d4acf59e903e9c84d70a5766ac Mon Sep 17 00:00:00 2001 From: bosiraphael <71827178+bosiraphael@users.noreply.github.com> Date: Thu, 1 Feb 2024 10:15:41 +0100 Subject: [PATCH] 3706 add email loader (#3731) * add images * update component * wip * add loader cntainer * wip * Loader is working * fix color and keyframes * change loading message for threads --- .../background/loading_messages_bg.png | Bin 0 -> 6229 bytes .../moving-image/loading_messages.png | Bin 0 -> 4368 bytes .../emails/components/EmailLoader.tsx | 17 ++++++++ .../emails/components/EmailThreads.tsx | 5 +++ .../components/RightDrawerEmailThread.tsx | 37 ++++++++++------- .../ui/feedback/loader/components/Loader.tsx | 38 ++++++++++++++++++ .../constants/AnimatedImages.ts | 2 + 7 files changed, 84 insertions(+), 15 deletions(-) create mode 100644 packages/twenty-front/public/images/placeholders/background/loading_messages_bg.png create mode 100644 packages/twenty-front/public/images/placeholders/moving-image/loading_messages.png create mode 100644 packages/twenty-front/src/modules/activities/emails/components/EmailLoader.tsx create mode 100644 packages/twenty-front/src/modules/ui/feedback/loader/components/Loader.tsx diff --git a/packages/twenty-front/public/images/placeholders/background/loading_messages_bg.png b/packages/twenty-front/public/images/placeholders/background/loading_messages_bg.png new file mode 100644 index 0000000000000000000000000000000000000000..60f7e8dd4c1f8c9e2ae457223a7bebadee7b606c GIT binary patch literal 6229 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 literal 0 HcmV?d00001 diff --git a/packages/twenty-front/public/images/placeholders/moving-image/loading_messages.png b/packages/twenty-front/public/images/placeholders/moving-image/loading_messages.png new file mode 100644 index 0000000000000000000000000000000000000000..674d2810b5398e5cec405ddab0077fd6675545c0 GIT binary patch literal 4368 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 KMNUMnLSTZ8h)|{g literal 0 HcmV?d00001 diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailLoader.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailLoader.tsx new file mode 100644 index 0000000000..cfaaab37b5 --- /dev/null +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailLoader.tsx @@ -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 }) => ( + + + + {loadingText || 'Loading emails'} + + + +); diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx index 0d25672344..c24bf6e7e8 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx @@ -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 ; + } + if (!firstQueryLoading && !timelineThreads?.length) { return ( diff --git a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx b/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx index 639f2cf996..b9de5bd110 100644 --- a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx +++ b/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx @@ -2,6 +2,7 @@ import React, { useCallback } from 'react'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; +import { EmailLoader } from '@/activities/emails/components/EmailLoader'; import { EmailThreadFetchMoreLoader } from '@/activities/emails/components/EmailThreadFetchMoreLoader'; import { EmailThreadHeader } from '@/activities/emails/components/EmailThreadHeader'; import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage'; @@ -25,7 +26,7 @@ export const RightDrawerEmailThread = () => { const { records: messages, - loading, + loading: firstQueryLoading, fetchMoreRecords, } = useFindManyRecords({ depth: 3, @@ -44,10 +45,10 @@ export const RightDrawerEmailThread = () => { }); const fetchMoreMessages = useCallback(() => { - if (!loading) { + if (!firstQueryLoading) { fetchMoreRecords(); } - }, [fetchMoreRecords, loading]); + }, [fetchMoreRecords, firstQueryLoading]); if (!viewableEmailThread) { return null; @@ -59,18 +60,24 @@ export const RightDrawerEmailThread = () => { subject={viewableEmailThread.subject} lastMessageSentAt={viewableEmailThread.lastMessageReceivedAt} /> - {messages.map((message) => ( - - ))} - + {firstQueryLoading ? ( + + ) : ( + <> + {messages.map((message) => ( + + ))} + + + )} ); }; diff --git a/packages/twenty-front/src/modules/ui/feedback/loader/components/Loader.tsx b/packages/twenty-front/src/modules/ui/feedback/loader/components/Loader.tsx new file mode 100644 index 0000000000..15cc038529 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/feedback/loader/components/Loader.tsx @@ -0,0 +1,38 @@ +import styled from '@emotion/styled'; +import { motion } from 'framer-motion'; + +const StyledLoaderContainer = styled.div` + justify-content: center; + align-items: center; + display: flex; + gap: ${({ theme }) => theme.spacing(2)}; + width: ${({ theme }) => theme.spacing(6)}; + height: ${({ theme }) => theme.spacing(3)}; + border-radius: ${({ theme }) => theme.border.radius.pill}; + border: 1px solid ${({ theme }) => theme.font.color.tertiary}; + overflow: hidden; +`; + +const StyledLoader = styled(motion.div)` + background-color: ${({ theme }) => theme.font.color.tertiary}; + border-radius: ${({ theme }) => theme.border.radius.pill}; + height: 8px; + width: 8px; +`; + +export const Loader = () => ( + + + +); diff --git a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/AnimatedImages.ts b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/AnimatedImages.ts index ac941cff2b..00e4836b18 100644 --- a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/AnimatedImages.ts +++ b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/AnimatedImages.ts @@ -5,6 +5,7 @@ export const Background: Record = { noTask: '/images/placeholders/background/no_task_bg.png', errorIndex: '/images/placeholders/background/error_index_bg.png', emptyTimeline: '/images/placeholders/background/empty_timeline_bg.png', + loadingMessages: '/images/placeholders/background/loading_messages_bg.png', emptyInbox: '/images/placeholders/background/empty_inbox_bg.png', error404: '/images/placeholders/background/404_bg.png', error500: '/images/placeholders/background/500_bg.png', @@ -17,6 +18,7 @@ export const MovingImage: Record = { noTask: '/images/placeholders/moving-image/no_task.png', errorIndex: '/images/placeholders/moving-image/error_index.png', emptyTimeline: '/images/placeholders/moving-image/empty_timeline.png', + loadingMessages: '/images/placeholders/moving-image/loading_messages.png', emptyInbox: '/images/placeholders/moving-image/empty_inbox.png', error404: '/images/placeholders/moving-image/404.png', error500: '/images/placeholders/moving-image/500.png',