From d2032ec32f9c3a3166a2c10a017602048712a083 Mon Sep 17 00:00:00 2001
From: Yoni K <yonikid15@gmail.com>
Date: Thu, 31 Oct 2024 10:17:39 -0400
Subject: [PATCH] Wait for live notifications to stop fetching

---
 .../NotificationList/NotificationList.tsx     | 11 +++--
 .../NotificationList/NotificationListPage.tsx | 48 ++++++++++++-------
 2 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/components/NotificationList/NotificationList.tsx b/apps/web/src/components/NotificationList/NotificationList.tsx
index 0dd4980abf5..2c43a91466e 100644
--- a/apps/web/src/components/NotificationList/NotificationList.tsx
+++ b/apps/web/src/components/NotificationList/NotificationList.tsx
@@ -54,16 +54,16 @@ const NotificationList = ({
   const [searchParams] = useSearchParams();
   const onlyUnread =
     searchParams.has("unread") && searchParams.get("unread") !== null;
-  const [{ data: maxPagesData, fetching }] = useQuery({
+  const [{ data: maxPagesData, fetching: fetchingMaxPages }] = useQuery({
     query: MaxNotificationPages_Query,
     variables: {
       where: { onlyUnread },
     },
   });
-  const [{ data }] = usePollingQuery(
+  const [{ data, fetching: fetchingLiveNotifications }] = usePollingQuery(
     {
       query: NotificationPolling_Query,
-      pause: !live || fetching,
+      pause: !live || fetchingMaxPages,
       variables: {
         where: {
           createdAt: {
@@ -119,7 +119,7 @@ const NotificationList = ({
             <NotificationListPage
               key={`notification-page-${currentPage}`}
               page={currentPage}
-              exclude={liveIds}
+              excludeIds={liveIds}
               isLastPage={currentPage === pagesToLoad}
               onlyUnread={onlyUnread}
               inDialog={inDialog}
@@ -127,6 +127,9 @@ const NotificationList = ({
               {...((!paginate || limit) && {
                 first: limit ?? 100,
               })}
+              fetchingLiveNotifications={
+                fetchingLiveNotifications || fetchingMaxPages
+              }
             />
           );
         })}
diff --git a/apps/web/src/components/NotificationList/NotificationListPage.tsx b/apps/web/src/components/NotificationList/NotificationListPage.tsx
index da483b56005..58e91116a10 100644
--- a/apps/web/src/components/NotificationList/NotificationListPage.tsx
+++ b/apps/web/src/components/NotificationList/NotificationListPage.tsx
@@ -43,10 +43,11 @@ interface NotificationPageProps {
   page: number;
   onlyUnread?: boolean;
   isLastPage?: boolean;
-  exclude?: Scalars["UUID"]["input"][];
+  excludeIds?: Scalars["UUID"]["input"][];
   first?: number;
   inDialog?: boolean;
   onRead?: () => void;
+  fetchingLiveNotifications?: boolean;
 }
 
 const NotificationListPage = ({
@@ -56,15 +57,17 @@ const NotificationListPage = ({
   isLastPage,
   inDialog,
   onRead,
-  exclude = [],
+  excludeIds = [],
+  fetchingLiveNotifications,
 }: NotificationPageProps) => {
   const intl = useIntl();
   const [searchParams] = useSearchParams();
   searchParams.set("page", `${page + 1}`);
   const [{ data, fetching }] = useQuery({
     query: Notifications_Query,
+    pause: fetchingLiveNotifications,
     variables: {
-      excludeIds: exclude,
+      excludeIds,
       first: first ?? PER_PAGE,
       page,
       where: {
@@ -75,11 +78,15 @@ const NotificationListPage = ({
 
   const notifications = unpackMaybes(data?.notifications?.data);
 
+  const isLoading =
+    (fetching || fetchingLiveNotifications) && excludeIds.length === 0;
+
   const showNullMessage =
     notifications.length === 0 &&
     page === 1 &&
     !fetching &&
-    exclude.length === 0;
+    !fetchingLiveNotifications &&
+    excludeIds.length === 0;
 
   const firstNewNotification = useRef<HTMLAnchorElement & HTMLButtonElement>(
     null,
@@ -87,22 +94,27 @@ const NotificationListPage = ({
 
   return (
     <>
-      {notifications.length > 0 ? (
+      {isLoading ? (
+        <Loading inline />
+      ) : (
         <>
-          {notifications.map((notification, index) => (
-            <NotificationItem
-              key={notification.id}
-              focusRef={
-                index === 0 && page !== 1 ? firstNewNotification : undefined
-              }
-              notification={notification}
-              inDialog={inDialog}
-              onRead={onRead}
-            />
-          ))}
+          {notifications.length > 0 ? (
+            <>
+              {notifications.map((notification, index) => (
+                <NotificationItem
+                  key={notification.id}
+                  focusRef={
+                    index === 0 && page !== 1 ? firstNewNotification : undefined
+                  }
+                  notification={notification}
+                  inDialog={inDialog}
+                  onRead={onRead}
+                />
+              ))}
+            </>
+          ) : null}
         </>
-      ) : null}
-      {fetching && exclude.length === 0 && <Loading inline />}
+      )}
       {showNullMessage && (
         <NotificationPortal.Portal
           containerId={NULL_MESSAGE_ROOT_ID}