From 89b3f91deda1aaf772164ac63365f25563ef1baa Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Tue, 22 Apr 2025 09:52:50 +1000
Subject: [PATCH] Update notification fetching (#9557)

- Reduce interval to 1 minute
- Only fetch for visible tab
---
 src/frontend/src/components/nav/Header.tsx | 9 ++++++---
 src/frontend/src/hooks/UseDataOutput.tsx   | 5 ++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/nav/Header.tsx b/src/frontend/src/components/nav/Header.tsx
index 25dcd9bf25..b85a49e0d7 100644
--- a/src/frontend/src/components/nav/Header.tsx
+++ b/src/frontend/src/components/nav/Header.tsx
@@ -11,7 +11,7 @@ import {
   Text,
   Tooltip
 } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { useDisclosure, useDocumentVisibility } from '@mantine/hooks';
 import { IconBell, IconSearch } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { type ReactNode, useEffect, useMemo, useState } from 'react';
@@ -63,10 +63,12 @@ export function Header() {
     return server.customize?.navbar_message;
   }, [server.customize]);
 
+  const visibility = useDocumentVisibility();
+
   // Fetch number of notifications for the current user
   const notifications = useQuery({
     queryKey: ['notification-count'],
-    enabled: isLoggedIn(),
+    enabled: isLoggedIn() && visibility === 'visible',
     queryFn: async () => {
       if (!isLoggedIn()) {
         return null;
@@ -90,7 +92,8 @@ export function Header() {
         return null;
       }
     },
-    refetchInterval: 5 * 60 * 1000,
+    // Refetch every minute, *if* the tab is visible
+    refetchInterval: 60 * 1000,
     refetchOnMount: true
   });
 
diff --git a/src/frontend/src/hooks/UseDataOutput.tsx b/src/frontend/src/hooks/UseDataOutput.tsx
index f0bb815dd8..7b1d90af6f 100644
--- a/src/frontend/src/hooks/UseDataOutput.tsx
+++ b/src/frontend/src/hooks/UseDataOutput.tsx
@@ -1,6 +1,7 @@
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
 import { t } from '@lingui/core/macro';
+import { useDocumentVisibility } from '@mantine/hooks';
 import { notifications, showNotification } from '@mantine/notifications';
 import { IconCircleCheck } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
@@ -21,6 +22,8 @@ export default function useDataOutput({
 }) {
   const api = useApi();
 
+  const visibility = useDocumentVisibility();
+
   const [loading, setLoading] = useState<boolean>(false);
 
   useEffect(() => {
@@ -38,7 +41,7 @@ export default function useDataOutput({
   }, [id, title]);
 
   const progress = useQuery({
-    enabled: !!id && loading,
+    enabled: !!id && loading && visibility === 'visible',
     refetchInterval: 500,
     queryKey: ['data-output', id, title],
     queryFn: () =>