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

Add loader and transition for details page tabs (#5935)

Browse Source 
Closes https://github.com/twentyhq/twenty/issues/5656



https://github.com/twentyhq/twenty/assets/22936103/3e4beea2-9aa9-4015-bb99-ee22adb53b63
This commit is contained in:
Thomas Trompette
2024-06-18 18:38:14 +02:00
committed by GitHub
parent cff8561597
commit 6b1548ebbe
11 changed files with 129 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx
View File

@ -2,6 +2,7 @@ import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { IconPlus } from 'twenty-ui';
import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
import { TASKS_TAB_LIST_COMPONENT_ID } from '@/activities/tasks/constants/TasksTabListComponentId';
import { useTasks } from '@/activities/tasks/hooks/useTasks';
@ -13,6 +14,7 @@ import {
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
@ -40,6 +42,8 @@ export const TaskGroups = ({
upcomingTasks,
unscheduledTasks,
completedTasks,
incompleteTasksLoading,
completeTasksLoading,
} = useTasks({
filterDropdownId: filterDropdownId,
targetableObjects: targetableObjects ?? [],
@ -50,15 +54,27 @@ export const TaskGroups = ({
const { activeTabIdState } = useTabList(TASKS_TAB_LIST_COMPONENT_ID);
const activeTabId = useRecoilValue(activeTabIdState);
if (
const isLoading =
(activeTabId !== 'done' && incompleteTasksLoading) ||
(activeTabId === 'done' && completeTasksLoading);
const isTasksEmpty =
(activeTabId !== 'done' &&
todayOrPreviousTasks?.length === 0 &&
upcomingTasks?.length === 0 &&
unscheduledTasks?.length === 0) ||
(activeTabId === 'done' && completedTasks?.length === 0)
) {
(activeTabId === 'done' && completedTasks?.length === 0);
if (isLoading && isTasksEmpty) {
return <SkeletonLoader />;
}
if (isTasksEmpty) {
return (
<AnimatedPlaceholderEmptyContainer>
<AnimatedPlaceholderEmptyContainer
// eslint-disable-next-line react/jsx-props-no-spreading
{...EMPTY_PLACEHOLDER_TRANSITION_PROPS}
>
<AnimatedPlaceholder type="noTask" />
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderEmptyTitle>