fix: use optimistic UI updates and memoization to eliminate flicker

- Update notification state immediately before API call (optimistic UI)
- Memoize all notification child components to prevent unnecessary re-renders
- Use opacity transition instead of removing unread dot from DOM

Author: kbzowski

ui/src/components/notifications/MarkdownContent.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { memo, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkBreaks from "remark-breaks";
@@ -55,7 +55,10 @@ function ImageWithFallback({ src, alt }: { src: string; alt?: string }) {
 	);
 }
 
-export function MarkdownContent({ content, className }: MarkdownContentProps) {
+export const MarkdownContent = memo(function MarkdownContent({
+	content,
+	className,
+}: MarkdownContentProps) {
 	const processedContent = preprocessMarkdown(content);
 
 	return (
@@ -125,4 +128,4 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
 			</ReactMarkdown>
 		</div>
 	);
-}
+});

ui/src/components/notifications/NotificationActions.tsx

@@ -1,5 +1,6 @@
 import { open } from "@tauri-apps/plugin-shell";
 import { ExternalLink } from "lucide-react";
+import { memo, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { isTauri } from "@/lib/tauri";
 import type { NotificationAction } from "@/types/ntfy";
@@ -8,26 +9,28 @@ interface NotificationActionsProps {
 	actions: NotificationAction[];
 }
 
-export function NotificationActions({ actions }: NotificationActionsProps) {
-	if (actions.length === 0) return null;
-
-	const handleClick = async (
-		e: React.MouseEvent,
-		action: NotificationAction,
-	) => {
-		e.stopPropagation();
-		if (!action.url) return;
+export const NotificationActions = memo(function NotificationActions({
+	actions,
+}: NotificationActionsProps) {
+	const handleClick = useCallback(
+		async (e: React.MouseEvent, action: NotificationAction) => {
+			e.stopPropagation();
+			if (!action.url) return;
 
-		try {
-			if (isTauri()) {
-				await open(action.url);
-			} else {
-				window.open(action.url, "_blank", "noopener,noreferrer");
+			try {
+				if (isTauri()) {
+					await open(action.url);
+				} else {
+					window.open(action.url, "_blank", "noopener,noreferrer");
+				}
+			} catch (err) {
+				console.error("Failed to open URL:", err);
 			}
-		} catch (err) {
-			console.error("Failed to open URL:", err);
-		}
-	};
+		},
+		[],
+	);
+
+	if (actions.length === 0) return null;
 
 	return (
 		<div className="flex flex-wrap gap-2 mt-4">
@@ -45,4 +48,4 @@ export function NotificationActions({ actions }: NotificationActionsProps) {
 			))}
 		</div>
 	);
-}
+});

ui/src/components/notifications/NotificationAttachments.tsx

@@ -1,4 +1,5 @@
 import { Download, FileText, Image as ImageIcon } from "lucide-react";
+import { memo } from "react";
 import { Button } from "@/components/ui/button";
 import { useLazyImage } from "@/hooks";
 import type { Attachment } from "@/types/ntfy";
@@ -35,7 +36,7 @@ function formatFileSize(bytes: number): string {
 	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 
-export function NotificationAttachments({
+export const NotificationAttachments = memo(function NotificationAttachments({
 	attachments,
 }: NotificationAttachmentsProps) {
 	if (attachments.length === 0) return null;
@@ -88,4 +89,4 @@ export function NotificationAttachments({
 			))}
 		</div>
 	);
-}
+});

ui/src/components/notifications/NotificationHeader.tsx

@@ -1,3 +1,5 @@
+import { memo } from "react";
+import { cn } from "@/lib/utils";
 import type { NotificationPriority } from "@/types/ntfy";
 import { PriorityBadge } from "./PriorityBadge";
 
@@ -25,7 +27,7 @@ function formatTimestamp(timestamp: number): string {
 	return new Date(timestamp).toLocaleDateString();
 }
 
-export function NotificationHeader({
+export const NotificationHeader = memo(function NotificationHeader({
 	title,
 	timestamp,
 	priority,
@@ -34,7 +36,12 @@ export function NotificationHeader({
 	return (
 		<div className="flex items-start justify-between gap-3">
 			<div className="flex items-center gap-2 min-w-0">
-				{!read && <span className="h-2 w-2 rounded-full bg-primary shrink-0" />}
+				<span
+					className={cn(
+						"h-2 w-2 rounded-full bg-primary shrink-0 transition-opacity",
+						read && "opacity-0",
+					)}
+				/>
 				<h3 className="font-semibold text-sm truncate">{title}</h3>
 			</div>
 			<div className="flex items-center gap-2 shrink-0">
@@ -45,4 +52,4 @@ export function NotificationHeader({
 			</div>
 		</div>
 	);
-}
+});

ui/src/components/notifications/NotificationTags.tsx

@@ -1,10 +1,13 @@
+import { memo } from "react";
 import { Badge } from "@/components/ui/badge";
 
 interface NotificationTagsProps {
 	tags: string[];
 }
 
-export function NotificationTags({ tags }: NotificationTagsProps) {
+export const NotificationTags = memo(function NotificationTags({
+	tags,
+}: NotificationTagsProps) {
 	if (tags.length === 0) return null;
 
 	return (
@@ -20,4 +23,4 @@ export function NotificationTags({ tags }: NotificationTagsProps) {
 			))}
 		</div>
 	);
-}
+});

ui/src/hooks/useNotifications.ts

@@ -69,12 +69,10 @@ export function useNotifications(subscriptions: Subscription[]) {
 
 	/**
 	 * Marks a notification as read.
+	 * Uses optimistic UI update for instant feedback.
 	 */
-	const markAsRead = useCallback(async (id: string) => {
-		if (isTauri()) {
-			await notificationsApi.markAsRead(id);
-		}
-
+	const markAsRead = useCallback((id: string) => {
+		// Optimistic update - instant UI feedback
 		setByTopic((prev) => {
 			const topicId = findTopicForNotification(prev, id);
 			if (!topicId) return prev;
@@ -87,31 +85,42 @@ export function useNotifications(subscriptions: Subscription[]) {
 			);
 			return new Map(prev).set(topicId, updated);
 		});
+
+		// API call in background
+		if (isTauri()) {
+			notificationsApi.markAsRead(id).catch((err) => {
+				console.error("Failed to mark as read:", err);
+			});
+		}
 	}, []);
 
 	/**
 	 * Marks all notifications in a topic as read.
+	 * Uses optimistic UI update for instant feedback.
 	 */
-	const markAllAsRead = useCallback(async (subscriptionId: string) => {
-		if (isTauri()) {
-			await notificationsApi.markAllAsRead(subscriptionId);
-		}
+	const markAllAsRead = useCallback((subscriptionId: string) => {
+		// Optimistic update - instant UI feedback
 		setByTopic((prev) => {
 			const notifs = prev.get(subscriptionId);
 			if (!notifs) return prev;
 			const updated = notifs.map((n) => ({ ...n, read: true }));
 			return new Map(prev).set(subscriptionId, updated);
 		});
+
+		// API call in background
+		if (isTauri()) {
+			notificationsApi.markAllAsRead(subscriptionId).catch((err) => {
+				console.error("Failed to mark all as read:", err);
+			});
+		}
 	}, []);
 
 	/**
 	 * Deletes a notification.
+	 * Uses optimistic UI update for instant feedback.
 	 */
-	const deleteNotification = useCallback(async (id: string) => {
-		if (isTauri()) {
-			await notificationsApi.delete(id);
-		}
-
+	const deleteNotification = useCallback((id: string) => {
+		// Optimistic update - instant UI feedback
 		setByTopic((prev) => {
 			const topicId = findTopicForNotification(prev, id);
 			if (!topicId) return prev;
@@ -122,6 +131,13 @@ export function useNotifications(subscriptions: Subscription[]) {
 			const filtered = notifs.filter((n) => n.id !== id);
 			return new Map(prev).set(topicId, filtered);
 		});
+
+		// API call in background
+		if (isTauri()) {
+			notificationsApi.delete(id).catch((err) => {
+				console.error("Failed to delete notification:", err);
+			});
+		}
 	}, []);
 
 	/**