Adding skeletons to all the infiniteList components

CruGlobal · Jun 7, 2024 · ce29847 · ce29847
1 parent bd0ba2f
commit ce29847
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 1 deletion.
diff --git a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.tsx b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.tsx
@@ -10,6 +10,7 @@ import { ListHeaderCheckBoxState } from 'src/components/Shared/Header/ListHeader
 import { StarFilterButton } from 'src/components/Shared/Header/StarFilterButton/StarFilterButton';
 import { TasksMassActionsDropdown } from 'src/components/Shared/MassActions/TasksMassActionsDropdown';
 import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal';
+import { TaskRowSkeleton } from 'src/components/Task/TaskRow/TaskRowSkeleton.skeleton';
 import { SearchBox } from 'src/components/common/SearchBox/SearchBox';
 import { TaskFilterSetInput } from 'src/graphql/types.generated';
 import { useGetTaskIdsForMassSelectionQuery } from 'src/hooks/GetIdsForMassSelection.generated';
@@ -227,6 +228,8 @@ export const ContactTasksTab: React.FC<ContactTasksTabProps> = ({
       <Box ref={infiniteListRef}>
         <InfiniteList
           loading={loading}
+          Skeleton={TaskRowSkeleton}
+          numberOfSkeletons={10}
           data={data?.tasks.nodes}
           EmptyPlaceholder={<ContactTasksTabNullState contactId={contactId} />}
           itemContent={(index, task) => (

diff --git a/src/components/Contacts/ContactFlow/ContactFlowColumn/ContactFlowColumn.tsx b/src/components/Contacts/ContactFlow/ContactFlowColumn/ContactFlowColumn.tsx
@@ -23,6 +23,7 @@ import { InfiniteList } from '../../../InfiniteList/InfiniteList';
 import { ContactRowFragment } from '../../ContactRow/ContactRow.generated';
 import { ContactFlowDropZone } from '../ContactFlowDropZone/ContactFlowDropZone';
 import { ContactFlowRow } from '../ContactFlowRow/ContactFlowRow';
+import { ContactFlowRowSkeleton } from '../ContactFlowRow/ContactFlowRow.skeleton';
 
 interface Props {
   data?: ContactRowFragment[];
@@ -150,6 +151,8 @@ export const ContactFlowColumn: React.FC<Props> = ({
         <Box ref={cardContentRef} width="100%" height="100%">
           <InfiniteList
             loading={loading}
+            Skeleton={ContactFlowRowSkeleton}
+            numberOfSkeletons={10}
             data={data?.contacts.nodes}
             itemContent={(_index, contact) => (
               <ContactFlowRow

diff --git a/src/components/Contacts/ContactFlow/ContactFlowRow/ContactFlowRow.skeleton.tsx b/src/components/Contacts/ContactFlow/ContactFlowRow/ContactFlowRow.skeleton.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Box, IconButton, Skeleton } from '@mui/material';
+import { StarredItemIcon } from 'src/components/common/StarredItemIcon/StarredItemIcon';
+import theme from '../../../../theme';
+import { DraggableBox } from './ContactFlowRow';
+
+export const StyledBox = styled(Box)(() => ({
+  display: 'flex',
+  width: '100%',
+  flexDirection: 'column',
+}));
+
+export const ContactFlowRowSkeleton: React.FC = () => {
+  return (
+    <Box
+      display="flex"
+      width="100%"
+      style={{
+        background: 'white',
+      }}
+    >
+      <DraggableBox>
+        <Box display="flex" alignItems="center" width="100%">
+          <Skeleton
+            width={theme.spacing(4)}
+            height={theme.spacing(4)}
+            variant={'rounded'}
+          />
+
+          <StyledBox ml={2} draggable>
+            <Skeleton
+              width={'100%'}
+              height={30}
+              style={{ maxWidth: '360px' }}
+            />
+            <Skeleton
+              width={'100%'}
+              height={20}
+              style={{ maxWidth: '180px' }}
+            />
+          </StyledBox>
+        </Box>
+        <Box display="flex">
+          <IconButton component="div">
+            <StarredItemIcon isStarred={false} />
+          </IconButton>
+        </Box>
+      </DraggableBox>
+    </Box>
+  );
+};
diff --git a/src/components/Contacts/ContactFlow/ContactFlowRow/ContactFlowRow.tsx b/src/components/Contacts/ContactFlow/ContactFlowRow/ContactFlowRow.tsx
@@ -32,7 +32,7 @@ const ContactLink = styled(Typography)(() => ({
   },
 }));
 
-const DraggableBox = styled(Box)(() => ({
+export const DraggableBox = styled(Box)(() => ({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',

diff --git a/src/components/Settings/Organization/Contacts/Contacts.tsx b/src/components/Settings/Organization/Contacts/Contacts.tsx
@@ -7,6 +7,7 @@ import {
   OrganizationsContext,
   OrganizationsContextType,
 } from 'pages/accountLists/[accountListId]/settings/organizations/OrganizationsContext';
+import { ContactRowSkeleton } from 'src/components/Contacts/ContactRow/ContactRowSkeleton.skeleton';
 import { InfiniteList } from 'src/components/InfiniteList/InfiniteList';
 import { NullStateBox } from 'src/components/Shared/Filters/NullState/NullStateBox';
 import { LoadingSpinner } from '../LoadingSpinner';
@@ -53,6 +54,8 @@ export const Contacts: React.FC = () => {
       {loading && <LoadingSpinner firstLoad={!pagination?.page} />}
       <InfiniteList
         loading={loading}
+        Skeleton={ContactRowSkeleton}
+        numberOfSkeletons={10}
         data={contacts ?? []}
         style={{
           height: infiniteListHeight