feat: implement optimistic updates for transaction handling and improve category selection in combobox components for enhanced user experience

app/transactions/page.tsx

@@ -341,6 +341,20 @@ export default function TransactionsPage() {
 
     const updatedTransaction = { ...transaction, categoryId };
 
+    // Optimistic update: update the cache immediately
+    queryClient.setQueryData<typeof transactionsData>(
+      ["transactions", transactionParams],
+      (oldData) => {
+        if (!oldData) return oldData;
+        return {
+          ...oldData,
+          transactions: oldData.transactions.map((t) =>
+            t.id === transactionId ? updatedTransaction : t,
+          ),
+        };
+      },
+    );
+
     try {
       await fetch("/api/banking/transactions", {
         method: "PUT",
@@ -350,6 +364,8 @@ export default function TransactionsPage() {
       invalidateTransactions();
     } catch (error) {
       console.error("Failed to update transaction:", error);
+      // Revert optimistic update on error
+      invalidateTransactions();
     }
   };
 
@@ -385,8 +401,23 @@ export default function TransactionsPage() {
       selectedTransactions.has(t.id),
     );
 
+    const transactionIds = transactionsToUpdate.map((t) => t.id);
     setSelectedTransactions(new Set());
 
+    // Optimistic update: update the cache immediately
+    queryClient.setQueryData<typeof transactionsData>(
+      ["transactions", transactionParams],
+      (oldData) => {
+        if (!oldData) return oldData;
+        return {
+          ...oldData,
+          transactions: oldData.transactions.map((t) =>
+            transactionIds.includes(t.id) ? { ...t, categoryId } : t,
+          ),
+        };
+      },
+    );
+
     try {
       await Promise.all(
         transactionsToUpdate.map((t) =>
@@ -400,6 +431,8 @@ export default function TransactionsPage() {
       invalidateTransactions();
     } catch (error) {
       console.error("Failed to update transactions:", error);
+      // Revert optimistic update on error
+      invalidateTransactions();
     }
   };