[Bug] Notifications panel flashes double state (#11758)

* Pause live notification query till max pages query is finished * Wait for live notifications to stop fetching --------- Co-authored-by: Yoni K <yonikid15@gmail.com>
GCTC-NTGC · Nov 1, 2024 · daa8785 · daa8785
1 parent ba03994
commit daa8785
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 23 deletions.
diff --git 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 }] = 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,
+      pause: !live || fetchingMaxPages,
       variables: {
         where: {
           createdAt: {
@@ -85,7 +85,6 @@ const NotificationList = ({
   const pagesArray = Array.from(Array(pagesToLoad).keys());
   const liveNotifications = unpackMaybes(data?.notifications?.data);
   const liveIds = liveNotifications.map(({ id }) => id);
-
   return (
     <>
       <NotificationActions
@@ -120,14 +119,17 @@ const NotificationList = ({
             <NotificationListPage
               key={`notification-page-${currentPage}`}
               page={currentPage}
-              exclude={liveIds}
+              excludeIds={liveIds}
               isLastPage={currentPage === pagesToLoad}
               onlyUnread={onlyUnread}
               inDialog={inDialog}
               onRead={onRead}
               {...((!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
@@ -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,34 +78,43 @@ 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,
   );
 
   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}