= ({ Skeleton, numberOfSkeletons }) => (
-
-
-
-
-
-
+ {[...Array(numberOfSkeletons).keys()].map((value) => {
+ return Skeleton ? (
+
+ ) : (
+
+ );
+ })}
);
@@ -72,6 +81,8 @@ export interface InfiniteListProps {
loading: boolean;
EmptyPlaceholder?: ReactElement | null;
itemContent: ItemContent;
+ Skeleton?: React.FC | null;
+ numberOfSkeletons?: number;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context?: any;
groupBy?: (item: T) => { label: string; order?: number };
@@ -84,6 +95,8 @@ export const InfiniteList = ({
context,
groupBy,
itemContent,
+ Skeleton = null,
+ numberOfSkeletons = 6,
...props
}: Omit, 'groupCounts' | 'itemContent'> &
InfiniteListProps): ReactElement => {
@@ -95,11 +108,13 @@ export const InfiniteList = ({
const commonProps: Omit, 'itemContent'> = {
...props,
components: {
- Footer: loading ? Loading : undefined,
+ Footer: loading
+ ? () => Loading({ Skeleton, numberOfSkeletons })
+ : undefined,
EmptyPlaceholder: loading ? undefined : () => EmptyPlaceholder,
List: ListContainer,
Item,
- ScrollSeekPlaceholder: SkeletonItem,
+ ScrollSeekPlaceholder: Skeleton ? Skeleton : SkeletonItem,
...props.components,
},
scrollSeekConfiguration: {
@@ -109,28 +124,33 @@ export const InfiniteList = ({
},
};
- if (groupCounts.length > 0) {
- return (
- (
- {groupLabels[index]}
- )}
- itemContent={(index) =>
- items[index] && itemContent(index, items[index], context)
- }
- {...commonProps}
- />
- );
- } else {
- return (
-
- items[index] && itemContent(index, items[index], context)
- }
- {...commonProps}
- />
- );
- }
+ return (
+
+ {loading && !items.length && (
+
+ )}
+
+ {!!groupCounts.length && (
+ (
+ {groupLabels[index]}
+ )}
+ itemContent={(index) =>
+ items[index] && itemContent(index, items[index], context)
+ }
+ {...commonProps}
+ />
+ )}
+ {!groupCounts.length && (
+
+ items[index] && itemContent(index, items[index], context)
+ }
+ {...commonProps}
+ />
+ )}
+
+ );
};
diff --git a/src/components/PageHeading/PageHeading.tsx b/src/components/PageHeading/PageHeading.tsx
index bd62e2941..66f12b490 100644
--- a/src/components/PageHeading/PageHeading.tsx
+++ b/src/components/PageHeading/PageHeading.tsx
@@ -42,10 +42,7 @@ const PageHeading = ({
const { classes } = useStyles();
return (
-
{subheading && (
@@ -85,7 +94,7 @@ const PageHeading = ({
)}
-
+
);
};
diff --git a/src/components/Settings/Organization/Contacts/Contacts.tsx b/src/components/Settings/Organization/Contacts/Contacts.tsx
index a495b4b64..dcf671fc2 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 && }
{
- const stringParts = inputKey.split('_');
-
- return stringParts.reduce((outputKey, part, index) => {
- if (index === 0) {
- return part;
- }
-
- return `${outputKey}${part.charAt(0).toUpperCase()}${part.slice(1)}`;
- }, '');
-};
-
const FilterHeader = styled(Box)(({ theme }) => ({
padding: theme.spacing(2),
borderBottom: '1px solid',
diff --git a/src/components/Task/TaskRow/TaskRow.tsx b/src/components/Task/TaskRow/TaskRow.tsx
index 878653373..d7c63dfca 100644
--- a/src/components/Task/TaskRow/TaskRow.tsx
+++ b/src/components/Task/TaskRow/TaskRow.tsx
@@ -20,14 +20,14 @@ import { StarTaskIconButton } from '../../Contacts/ContactDetails/ContactTasksTa
import { TaskModalEnum } from '../Modal/TaskModal';
import { TaskRowFragment } from './TaskRow.generated';
-const SubjectWrapOuter = styled(Box)(({ theme }) => ({
+export const SubjectWrapOuter = styled(Box)(({ theme }) => ({
width: 'fit-content',
display: 'flex',
alignItems: 'center',
marginRight: theme.spacing(1),
}));
-const SubjectWrapInner = styled(Box)(({}) => ({
+export const SubjectWrapInner = styled(Box)(({}) => ({
display: 'flex',
'&:hover': {
textDecoration: 'underline',
@@ -94,7 +94,7 @@ export const TaskRow: React.FC = ({
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
- marginTop: useTopMargin ? '20px' : '0',
+ marginTop: useTopMargin ? '16px' : '0',
}));
const { openTaskModal, preloadTaskModal } = useTaskModal();
diff --git a/src/components/Task/TaskRow/TaskRowSkeleton.skeleton.tsx b/src/components/Task/TaskRow/TaskRowSkeleton.skeleton.tsx
new file mode 100644
index 000000000..c8ea6c96f
--- /dev/null
+++ b/src/components/Task/TaskRow/TaskRowSkeleton.skeleton.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import CalendarToday from '@mui/icons-material/CalendarToday';
+import { Box, Hidden, Skeleton, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import {
+ TaskCommentIcon,
+ TaskRowWrap,
+} from 'src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCommentsButton/TaskCommentsButton';
+import { InfiniteListRowSkeletonProps } from 'src/components/InfiniteList/InfiniteList';
+import { DeletedItemIcon } from 'src/components/common/DeleteItemIcon/DeleteItemIcon';
+import { StarredItemIcon } from 'src/components/common/StarredItemIcon/StarredItemIcon';
+import theme from 'src/theme';
+
+const TaskRowSkeletonWrap = styled(Box)(({ theme }) => ({
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ margin: theme.spacing(1),
+}));
+
+const TaskCalendarIcon = styled(CalendarToday)(() => ({
+ width: 20,
+ height: 20,
+ color: theme.palette.text.secondary,
+}));
+
+const TaskCommentNumber = styled(Typography)(() => ({
+ color: theme.palette.text.primary,
+ margin: theme.spacing(0.5),
+}));
+
+const ContactRowButton = styled(Box)(() => ({
+ height: '56px',
+ width: '100%',
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-evenly',
+ alignItems: 'center',
+ alignContent: 'center',
+ cursor: 'pointer',
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ marginTop: '0',
+}));
+
+export const TaskRowSkeleton: React.FC = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 0
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/yarn.lock b/yarn.lock
index 5aeaa51ac..916696723 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8154,24 +8154,6 @@ __metadata:
languageName: node
linkType: hard
-"@virtuoso.dev/react-urx@npm:^0.2.12":
- version: 0.2.13
- resolution: "@virtuoso.dev/react-urx@npm:0.2.13"
- dependencies:
- "@virtuoso.dev/urx": ^0.2.13
- peerDependencies:
- react: ">=16"
- checksum: 173e91c21f6a8cd506ad3b72af10656897fe1951124ed9eeb1fd85575534993bea2f97cba3f81c08ae1e88a2613df348e2c80d0ceecb3021f8c8c8fe0e053ee2
- languageName: node
- linkType: hard
-
-"@virtuoso.dev/urx@npm:^0.2.12, @virtuoso.dev/urx@npm:^0.2.13":
- version: 0.2.13
- resolution: "@virtuoso.dev/urx@npm:0.2.13"
- checksum: 682a99cf40ccc429241268dd37495cd1ed4695ae58b5a1169c75df1630d5dc3fd8eb3aaa655f71c37f39ba9c23c0aaf4401b76d8a986986d1a38a422d596a6ba
- languageName: node
- linkType: hard
-
"@webassemblyjs/ast@npm:1.11.1":
version: 1.11.1
resolution: "@webassemblyjs/ast@npm:1.11.1"
@@ -19529,7 +19511,7 @@ __metadata:
react-dnd-html5-backend: ^14.0.2
react-dom: ^18.2.0
react-i18next: ^11.18.6
- react-virtuoso: 2.19.0
+ react-virtuoso: ^4.7.4
recharts: 2.3.2
rollbar: ^2.25.2
storybook: ^6.5.16
@@ -22257,16 +22239,13 @@ __metadata:
languageName: node
linkType: hard
-"react-virtuoso@npm:2.19.0":
- version: 2.19.0
- resolution: "react-virtuoso@npm:2.19.0"
- dependencies:
- "@virtuoso.dev/react-urx": ^0.2.12
- "@virtuoso.dev/urx": ^0.2.12
+"react-virtuoso@npm:^4.7.4":
+ version: 4.7.11
+ resolution: "react-virtuoso@npm:4.7.11"
peerDependencies:
react: ">=16 || >=17 || >= 18"
react-dom: ">=16 || >=17 || >= 18"
- checksum: 146416808b72a533d9e710826dfa2626fcc5761d6cb5709d082ed069b92b76e1258ae14bcea391fb6ac9fec09280e5e9b33fb10b4f269695e234f4323af4434c
+ checksum: 3e9b56e8bd2ae88b04563ff3ce221c95db493741ff89667475e390a8abfb202a9b0692cbe9edd822316a27c902c835ce0e287b036df6644909317c7a6c1462fc
languageName: node
linkType: hard