Maintain some feed data to avoid needless glimmers (#2054)

2 files changed, 19 insertions, 1 deletions

diff --git a/src/state/queries/notifications/unread.tsx b/src/state/queries/notifications/unread.tsx
index e0510e79e..6c130aaea 100644
--- a/src/state/queries/notifications/unread.tsx
+++ b/src/state/queries/notifications/unread.tsx
@@ -14,6 +14,7 @@ import {isNative} from '#/platform/detection'
 import {useMutedThreads} from '#/state/muted-threads'
 import {RQKEY as RQKEY_NOTIFS} from './feed'
 import {logger} from '#/logger'
+import {truncateAndInvalidate} from '../util'
 
 const UPDATE_INTERVAL = 30 * 1e3 // 30sec
 
@@ -126,7 +127,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
           // update & broadcast
           setNumUnread(unreadCountStr)
           if (invalidate) {
-            queryClient.resetQueries({queryKey: RQKEY_NOTIFS()})
+            truncateAndInvalidate(queryClient, RQKEY_NOTIFS())
           }
           broadcast.postMessage({event: unreadCountStr})
         } catch (e) {
diff --git a/src/state/queries/util.ts b/src/state/queries/util.ts
new file mode 100644
index 000000000..0b3eefea2
--- /dev/null
+++ b/src/state/queries/util.ts
@@ -0,0 +1,17 @@
+import {QueryClient, QueryKey, InfiniteData} from '@tanstack/react-query'
+
+export function truncateAndInvalidate<T = any>(
+  queryClient: QueryClient,
+  querykey: QueryKey,
+) {
+  queryClient.setQueryData<InfiniteData<T>>(querykey, data => {
+    if (data) {
+      return {
+        pageParams: data.pageParams.slice(0, 1),
+        pages: data.pages.slice(0, 1),
+      }
+    }
+    return data
+  })
+  queryClient.invalidateQueries({queryKey: querykey})
+}