actually optimistic mark as read (#3917)

src/state/queries/messages/conversation.ts

@@ -1,8 +1,9 @@
 import {BskyAgent} from '@atproto-labs/api'
-import {useMutation, useQuery} from '@tanstack/react-query'
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 
 import {useOnMarkAsRead} from '#/state/queries/messages/list-converations'
 import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlStorage'
+import {RQKEY as LIST_CONVOS_KEY} from './list-converations'
 import {useHeaders} from './temp-headers'
 
 const RQKEY_ROOT = 'convo'
@@ -28,7 +29,8 @@ export function useConvoQuery(convoId: string) {
 export function useMarkAsReadMutation() {
   const headers = useHeaders()
   const {serviceUrl} = useDmServiceUrlStorage()
-  const onMarkAsRead = useOnMarkAsRead()
+  const optimisticUpdate = useOnMarkAsRead()
+  const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: async ({
@@ -50,8 +52,11 @@ export function useMarkAsReadMutation() {
         },
       )
     },
-    onSuccess(_, {convoId}) {
-      onMarkAsRead(convoId)
+    onMutate({convoId}) {
+      optimisticUpdate(convoId)
+    },
+    onSettled() {
+      queryClient.invalidateQueries({queryKey: LIST_CONVOS_KEY})
     },
   })
 }

src/state/queries/messages/list-converations.ts

@@ -122,7 +122,6 @@ export function useOnMarkAsRead() {
           unreadCount: 0,
         }))
       })
-      queryClient.invalidateQueries({queryKey: RQKEY})
     },
     [queryClient],
   )