Render activity list items fully first when they enter viewport

src/features/campaigns/components/ActivityList/index.tsx

@@ -1,7 +1,7 @@
-import { FilterListOutlined } from '@mui/icons-material';
+import { FilterListOutlined, Pending } from '@mui/icons-material';
 import Fuse from 'fuse.js';
-import { useMemo } from 'react';
-import { Box, Card, Divider, Typography } from '@mui/material';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Box, BoxProps, Card, Divider, Typography } from '@mui/material';
 
 import CallAssignmentListItem from './items/CallAssignmentListItem';
 import EmailListItem from './items/EmailListItem';
@@ -17,12 +17,61 @@ import useClusteredActivities, {
   CLUSTER_TYPE,
 } from 'features/campaigns/hooks/useClusteredActivities';
 import CanvassAssignmentListItem from './items/CanvassAssignmentListItem';
+import ActivityListItem, { STATUS_COLORS } from './items/ActivityListItem';
 
 interface ActivitiesProps {
   activities: CampaignActivity[];
   orgId: number;
 }
 
+interface LazyActivitiesBoxProps extends BoxProps {
+  index: number;
+}
+
+const LazyActivitiesBox = ({
+  index,
+  children,
+  ...props
+}: LazyActivitiesBoxProps) => {
+  const [inView, setInView] = useState(false);
+  const boxRef = useRef<HTMLElement>();
+
+  useEffect(() => {
+    if (!boxRef.current) {
+      return;
+    }
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setInView(true);
+        }
+      });
+    });
+
+    observer.observe(boxRef.current);
+  }, [boxRef]);
+
+  return inView ? (
+    <Box {...props}>
+      {index > 0 && <Divider />}
+      {children}
+    </Box>
+  ) : (
+    <Box ref={boxRef}>
+      {index > 0 && <Divider />}
+      <ActivityListItem
+        color={STATUS_COLORS.GRAY}
+        endNumber={0}
+        href={'#'}
+        PrimaryIcon={Pending}
+        SecondaryIcon={Pending}
+        title={'...'}
+      />
+    </Box>
+  );
+};
+
 const Activities = ({ activities, orgId }: ActivitiesProps) => {
   const clustered = useClusteredActivities(activities);
 
@@ -31,52 +80,52 @@ const Activities = ({ activities, orgId }: ActivitiesProps) => {
       {clustered.map((activity, index) => {
         if (activity.kind === ACTIVITIES.CALL_ASSIGNMENT) {
           return (
-            <Box key={`ca-${activity.data.id}`}>
-              {index > 0 && <Divider />}
+            <LazyActivitiesBox key={`ca-${activity.data.id}`} index={index}>
               <CallAssignmentListItem caId={activity.data.id} orgId={orgId} />
-            </Box>
+            </LazyActivitiesBox>
           );
         } else if (activity.kind == ACTIVITIES.CANVASS_ASSIGNMENT) {
           return (
-            <Box key={`canvassassignment-${activity.data.id}`}>
-              {index > 0 && <Divider />}
+            <LazyActivitiesBox
+              key={`canvassassignment-${activity.data.id}`}
+              index={index}
+            >
               <CanvassAssignmentListItem
                 caId={activity.data.id}
                 orgId={orgId}
               />
-            </Box>
+            </LazyActivitiesBox>
           );
         } else if (isEventCluster(activity)) {
           return (
-            <Box key={`event-${activity.events[0].id}`}>
-              {index > 0 && <Divider />}
+            <LazyActivitiesBox
+              key={`event-${activity.events[0].id}`}
+              index={index}
+            >
               {activity.kind == CLUSTER_TYPE.SINGLE ? (
                 <EventListItem cluster={activity} />
               ) : (
                 <EventClusterListItem cluster={activity} />
               )}
-            </Box>
+            </LazyActivitiesBox>
           );
         } else if (activity.kind === ACTIVITIES.SURVEY) {
           return (
-            <Box key={`survey-${activity.data.id}`}>
-              {index > 0 && <Divider />}
+            <LazyActivitiesBox key={`survey-${activity.data.id}`} index={index}>
               <SurveyListItem orgId={orgId} surveyId={activity.data.id} />
-            </Box>
+            </LazyActivitiesBox>
           );
         } else if (activity.kind === ACTIVITIES.TASK) {
           return (
-            <Box key={`task-${activity.data.id}`}>
-              {index > 0 && <Divider />}
+            <LazyActivitiesBox key={`task-${activity.data.id}`} index={index}>
               <TaskListItem orgId={orgId} taskId={activity.data.id} />
-            </Box>
+            </LazyActivitiesBox>
           );
         } else if (activity.kind === ACTIVITIES.EMAIL) {
           return (
-            <Box key={`email-${activity.data.id}`}>
-              {index > 0 && <Divider />}
+            <LazyActivitiesBox key={`email-${activity.data.id}`} index={index}>
               <EmailListItem emailId={activity.data.id} orgId={orgId} />
-            </Box>
+            </LazyActivitiesBox>
           );
         }
       })}