From 038720cc53499da7c15e2acec7e9f4bb06de9f92 Mon Sep 17 00:00:00 2001
From: Carson Full <carson_full@tsco.org>
Date: Mon, 21 Oct 2024 11:49:13 -0500
Subject: [PATCH] Add loading state

---
 .../Root/Notifications/Notifications.tsx      |  6 +++
 .../Root/Notifications/ReadIndicator.tsx      |  3 +-
 src/scenes/Root/Notifications/Views/Base.tsx  | 39 ++++++++++++++-----
 3 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/scenes/Root/Notifications/Notifications.tsx b/src/scenes/Root/Notifications/Notifications.tsx
index fe99558ca..389045983 100644
--- a/src/scenes/Root/Notifications/Notifications.tsx
+++ b/src/scenes/Root/Notifications/Notifications.tsx
@@ -21,6 +21,7 @@ import { Notification } from './Notification';
 import { NotificationListDocument } from './NotificationList.graphql';
 import { ReadNotificationDocument } from './ReadNotification.graphql';
 import { NotificationFragment } from './Views';
+import { BaseView } from './Views/Base';
 
 export const Notifications = () => {
   const enabled = useFeatureEnabled('notifications');
@@ -113,6 +114,11 @@ export const Notifications = () => {
           <Divider sx={{ mx: 1 }} />
         </Box>
         <Stack divider={<Divider />} sx={{ p: 1, pt: 0.5, gap: 0.5 }}>
+          {loading && !data
+            ? Array.from({ length: 5 }).map((_, i) => (
+                <BaseView key={i} notification="loading" />
+              ))
+            : null}
           {data?.items.map((notification) => (
             <Notification
               key={notification.id}
diff --git a/src/scenes/Root/Notifications/ReadIndicator.tsx b/src/scenes/Root/Notifications/ReadIndicator.tsx
index 47e8da6e1..02c673050 100644
--- a/src/scenes/Root/Notifications/ReadIndicator.tsx
+++ b/src/scenes/Root/Notifications/ReadIndicator.tsx
@@ -1,5 +1,6 @@
 import { CheckCircleOutlined, Circle } from '@mui/icons-material';
-import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
+import { Tooltip } from '@mui/material';
+import { IconButton, IconButtonProps } from '~/components/IconButton';
 import { NotificationProp } from './Views';
 
 export const ReadIndicator = ({
diff --git a/src/scenes/Root/Notifications/Views/Base.tsx b/src/scenes/Root/Notifications/Views/Base.tsx
index acd434206..1bfc949e1 100644
--- a/src/scenes/Root/Notifications/Views/Base.tsx
+++ b/src/scenes/Root/Notifications/Views/Base.tsx
@@ -1,4 +1,4 @@
-import { Box, Stack, Theme, Typography } from '@mui/material';
+import { Box, Skeleton, Stack, Theme, Typography } from '@mui/material';
 // eslint-disable-next-line @seedcompany/no-restricted-imports
 import type { OverridableComponent } from '@mui/material/OverridableComponent';
 import { alpha } from '@mui/material/styles';
@@ -19,15 +19,24 @@ interface NotificationTypeMap<
   AdditionalProps = object,
   RootComponent extends ElementType = typeof Box
 > {
-  props: NotificationProp & ChildrenProp & StyleProps & AdditionalProps;
+  props: (NotificationProp | { notification: 'loading' }) &
+    ChildrenProp &
+    StyleProps &
+    AdditionalProps;
   defaultComponent: RootComponent;
 }
 
 export const BaseView: OverridableComponent<NotificationTypeMap> = (
   props: NotificationTypeMap['props'] & { component?: ElementType }
 ) => {
-  const { component: Root = Box, notification, children, ...rest } = props;
-  const { unread, createdAt } = notification;
+  const {
+    component: Root = Box,
+    notification: notificationIn,
+    children,
+    ...rest
+  } = props;
+  const notification =
+    notificationIn !== 'loading' ? notificationIn : undefined;
   return (
     <Root
       color="primary"
@@ -35,7 +44,7 @@ export const BaseView: OverridableComponent<NotificationTypeMap> = (
       sx={[
         (theme: Theme) => ({
           width: 1,
-          backgroundColor: unread
+          backgroundColor: notification?.unread
             ? alpha(theme.palette.primary.light, 0.1)
             : undefined,
           borderRadius: 1,
@@ -48,13 +57,25 @@ export const BaseView: OverridableComponent<NotificationTypeMap> = (
       ]}
     >
       <Stack sx={{ flex: 1, gap: 1, alignItems: 'flex-start' }}>
-        {children}
+        {notification ? (
+          children
+        ) : (
+          <Skeleton width={`${Math.random() * (100 - 25) + 25}%`} />
+        )}
         <Typography variant="caption" color="textSecondary">
-          <RelativeDateTime date={createdAt} />
+          {notification ? (
+            <RelativeDateTime date={notification.createdAt} />
+          ) : (
+            <Skeleton width="30%" />
+          )}
         </Typography>
       </Stack>
-      {/* Just to reserve layout */}
-      <ReadIndicator disabled sx={{ visibility: 'hidden' }} />
+      {notification ? (
+        // Just to reserve layout
+        <ReadIndicator disabled sx={{ visibility: 'hidden' }} />
+      ) : (
+        <ReadIndicator loading css={{ transform: 'scale(.7)' }} />
+      )}
     </Root>
   );
 };