refactor: fetching notification only when popover is open (#1706)

apps/app/components/notifications/notification-popover.tsx

@@ -45,6 +45,7 @@ export const NotificationPopover = () => {
     isLoadingMore,
     hasMore,
     isRefreshing,
+    setFetchNotifications,
   } = useUserNotification();
 
   // theme context
@@ -66,7 +67,10 @@ export const NotificationPopover = () => {
         }}
       />
       <Popover className="relative w-full">
-        {({ open: isActive, close: closePopover }) => (
+        {({ open: isActive, close: closePopover }) => {
+          if (isActive) setFetchNotifications(true);
+
+          return (
             <>
               <Tooltip
                 tooltipContent="Notifications"
@@ -189,7 +193,8 @@ export const NotificationPopover = () => {
                 </Popover.Panel>
               </Transition>
             </>
-        )}
+          );
+        }}
       </Popover>
     </>
   );

apps/app/hooks/use-user-notifications.tsx

@@ -25,6 +25,7 @@ const useUserNotification = () => {
   const [snoozed, setSnoozed] = useState<boolean>(false);
   const [archived, setArchived] = useState<boolean>(false);
   const [readNotification, setReadNotification] = useState<boolean>(false);
+  const [fetchNotifications, setFetchNotifications] = useState<boolean>(false);
   const [selectedNotificationForSnooze, setSelectedNotificationForSnooze] = useState<string | null>(
     null
   );
@@ -49,7 +50,7 @@ const useUserNotification = () => {
     isValidating,
     mutate: notificationMutate,
   } = useSWRInfinite(
-    workspaceSlug
+    fetchNotifications && workspaceSlug
       ? (index, prevData) =>
           getPaginatedNotificationKey(index, prevData, workspaceSlug.toString(), params)
       : () => null,
@@ -282,6 +283,7 @@ const useUserNotification = () => {
     isLoadingMore,
     hasMore,
     isRefreshing,
+    setFetchNotifications,
   };
 };