fix: Optimize live tail memory (#764)

Author: ernestii

packages/app/src/DBSearchPage.tsx

@@ -42,7 +42,11 @@ import {
   Stack,
   Text,
 } from '@mantine/core';
-import { useDebouncedCallback, useDisclosure } from '@mantine/hooks';
+import {
+  useDebouncedCallback,
+  useDisclosure,
+  useDocumentVisibility,
+} from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
 import { useIsFetching } from '@tanstack/react-query';
 import CodeMirror from '@uiw/react-codemirror';
@@ -802,12 +806,14 @@ function DBSearchPage() {
       queryKey: [QUERY_KEY_PREFIX],
     }) > 0;
 
+  const isTabVisible = useDocumentVisibility();
+
   useLiveUpdate({
     isLive,
     interval: 1000 * 60 * 15,
     refreshFrequency: 4000,
     onTimeRangeSelect,
-    pause: isAnyQueryFetching || !queryReady,
+    pause: isAnyQueryFetching || !queryReady || !isTabVisible,
   });
 
   // This ensures we only render this conditionally on the client

packages/app/src/hooks/useOffsetPaginatedQuery.tsx

@@ -303,6 +303,7 @@ export default function useOffsetPaginatedQuery(
     gcTime: isLive ? ms('30s') : ms('5m'), // more aggressive gc for live data, since it can end up holding lots of data
     retry: 1,
     refetchOnWindowFocus: false,
+    maxPages: isLive ? 5 : undefined, // Limit number of pages kept in cache for live data
   });
 
   const flattenedData = useMemo(() => flattenData(data), [data]);