diff --git a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.tsx b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.tsx index 8a54c0f4c5..e62843084f 100644 --- 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 = ({ } itemContent={(index, task) => ( diff --git a/src/components/Contacts/ContactFlow/ContactFlowColumn/ContactFlowColumn.tsx b/src/components/Contacts/ContactFlow/ContactFlowColumn/ContactFlowColumn.tsx index 2e28e0b5b6..a35da03e59 100644 --- 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 = ({ ( ({ + display: 'flex', + width: '100%', + flexDirection: 'column', +})); + +export const ContactFlowRowSkeleton: React.FC = () => { + return ( + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/components/Contacts/ContactFlow/ContactFlowRow/ContactFlowRow.tsx b/src/components/Contacts/ContactFlow/ContactFlowRow/ContactFlowRow.tsx index e15623fd2b..33eacc835c 100644 --- 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 index a495b4b641..dcf671fc29 100644 --- 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 && }