gitstart-twenty
9c046dcfdb
### Description Prefetch Skeleton Loading on Indexes and Shows ### Refs #4458 ### Demo https://jam.dev/c/a1ad04e1-80b6-4b2a-b7df-373f52f4b169 https://jam.dev/c/c5038b97-2f18-4c29-8dee-18c09376e5ee Fixes: #4458 --------- Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> Co-authored-by: Charles Bochet <charles@twenty.com>
69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import { useRecoilValue } from 'recoil';
|
|
|
|
import { TimelineCreateButtonGroup } from '@/activities/timeline/components/TimelineCreateButtonGroup';
|
|
import { TimelineSkeletonLoader } from '@/activities/timeline/components/TimelineSkeletonLoader';
|
|
import { timelineActivitiesForGroupState } from '@/activities/timeline/states/timelineActivitiesForGroupState';
|
|
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
|
|
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
|
|
import {
|
|
AnimatedPlaceholderEmptyContainer,
|
|
AnimatedPlaceholderEmptySubTitle,
|
|
AnimatedPlaceholderEmptyTextContainer,
|
|
AnimatedPlaceholderEmptyTitle,
|
|
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
|
|
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
|
|
|
import { TimelineItemsContainer } from './TimelineItemsContainer';
|
|
|
|
const StyledMainContainer = styled.div`
|
|
align-items: flex-start;
|
|
align-self: stretch;
|
|
border-top: ${({ theme }) =>
|
|
useIsMobile() ? `1px solid ${theme.border.color.medium}` : 'none'};
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
|
|
justify-content: center;
|
|
`;
|
|
|
|
export const Timeline = ({
|
|
targetableObject,
|
|
loading,
|
|
}: {
|
|
targetableObject: ActivityTargetableObject;
|
|
loading: boolean;
|
|
}) => {
|
|
const timelineActivitiesForGroup = useRecoilValue(
|
|
timelineActivitiesForGroupState,
|
|
);
|
|
|
|
if (loading) {
|
|
return <TimelineSkeletonLoader />;
|
|
}
|
|
|
|
if (timelineActivitiesForGroup.length === 0) {
|
|
return (
|
|
<AnimatedPlaceholderEmptyContainer>
|
|
<AnimatedPlaceholder type="emptyTimeline" />
|
|
<AnimatedPlaceholderEmptyTextContainer>
|
|
<AnimatedPlaceholderEmptyTitle>
|
|
Add your first Activity
|
|
</AnimatedPlaceholderEmptyTitle>
|
|
<AnimatedPlaceholderEmptySubTitle>
|
|
There are no activities associated with this record.{' '}
|
|
</AnimatedPlaceholderEmptySubTitle>
|
|
</AnimatedPlaceholderEmptyTextContainer>
|
|
<TimelineCreateButtonGroup targetableObject={targetableObject} />
|
|
</AnimatedPlaceholderEmptyContainer>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<StyledMainContainer>
|
|
<TimelineItemsContainer />
|
|
</StyledMainContainer>
|
|
);
|
|
};
|