Add an optimistic update for the mark-notification-as-read action so the unread indicator clears immediately

[Chucks1093]

Summary

Clicking a notification to mark it as read currently waits for the server response before the unread indicator clears, making the action feel slow. An optimistic update should clear the indicator immediately and roll back if the request fails.

Scope

• Implement optimistic update in useMarkNotificationRead using React Query's onMutate / onError / onSettled
• Cancel in-flight notification list queries before applying the optimistic update
• Roll back to unread state if the mutation fails
• Decrement the nav bell unread count optimistically and restore it on rollback
• Invalidate the notification list cache when the mutation settles

Acceptance Criteria

• Unread indicator clears immediately on click before server response
• Failed mutation restores the unread indicator
• Nav bell unread count decrements optimistically
• Unread count restored on rollback
• Notification cache invalidated after mutation settles

ETA: 12 hours

---

Coordinate on Telegram

[madisonsc52-del]

@madisonsc52-del has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi maintainer i can work on this, I'll make sure to work on the issue asap

ℹ️ Repo Maintainers: To accept this application, review their application or assign @madisonsc52-del to this issue.

[intelliDean]

@intelliDean has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I'd like to work on this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @intelliDean to this issue.

[makuo567]

@makuo567 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi maintainer, can i work on this issue?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @makuo567 to this issue.

[ibochielizabeth-spec]

@ibochielizabeth-spec has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

hello maintainer can i work on this

ℹ️ Repo Maintainers: To accept this application, review their application or assign @ibochielizabeth-spec to this issue.

[Smartdevs17]

@Smartdevs17 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

can I work on this?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Smartdevs17 to this issue.

[drips-wave]

Congratulations, @makuo567! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

🧑‍💻 @makuo567: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊