feat: implement transaction updating state management and loading indicators in transaction table for improved user feedback during updates

components/transactions/transaction-table.tsx

@@ -24,6 +24,7 @@ import {
   ArrowUpDown,
   Wand2,
   Trash2,
+  Loader2,
 } from "lucide-react";
 import { DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
@@ -50,6 +51,7 @@ interface TransactionTableProps {
   onDelete: (id: string) => void;
   formatCurrency: (amount: number) => string;
   formatDate: (dateStr: string) => string;
+  updatingTransactionIds?: Set<string>;
 }
 
 const ROW_HEIGHT = 72; // Hauteur approximative d'une ligne
@@ -142,6 +144,7 @@ export function TransactionTable({
   onDelete,
   formatCurrency,
   formatDate,
+  updatingTransactionIds = new Set(),
 }: TransactionTableProps) {
   const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
   const parentRef = useRef<HTMLDivElement>(null);
@@ -161,7 +164,7 @@ export function TransactionTable({
       setFocusedIndex(index);
       onMarkReconciled(transactionId);
     },
-    [onMarkReconciled],
+    [onMarkReconciled]
   );
 
   const handleKeyDown = useCallback(
@@ -190,7 +193,7 @@ export function TransactionTable({
         }
       }
     },
-    [focusedIndex, transactions, onMarkReconciled, virtualizer],
+    [focusedIndex, transactions, onMarkReconciled, virtualizer]
   );
 
   useEffect(() => {
@@ -207,7 +210,7 @@ export function TransactionTable({
     (accountId: string) => {
       return accounts.find((a) => a.id === accountId);
     },
-    [accounts],
+    [accounts]
   );
 
   const getCategory = useCallback(
@@ -215,7 +218,7 @@ export function TransactionTable({
       if (!categoryId) return null;
       return categories.find((c) => c.id === categoryId);
     },
-    [categories],
+    [categories]
   );
 
   return (
@@ -266,7 +269,7 @@ export function TransactionTable({
                       className={cn(
                         "p-4 space-y-3 hover:bg-muted/50 cursor-pointer border-b border-border",
                         transaction.isReconciled && "bg-emerald-500/5",
-                        isFocused && "bg-primary/10 ring-1 ring-primary/30",
+                        isFocused && "bg-primary/10 ring-1 ring-primary/30"
                       )}
                     >
                       <div className="flex items-start justify-between gap-2">
@@ -294,7 +297,7 @@ export function TransactionTable({
                             "font-semibold tabular-nums text-sm md:text-base shrink-0",
                             transaction.amount >= 0
                               ? "text-emerald-600"
-                              : "text-red-600",
+                              : "text-red-600"
                           )}
                         >
                           {transaction.amount >= 0 ? "+" : ""}
@@ -313,8 +316,13 @@ export function TransactionTable({
                         )}
                         <div
                           onClick={(e) => e.stopPropagation()}
-                          className="flex-1"
+                          className="flex-1 relative"
                         >
+                          {updatingTransactionIds.has(transaction.id) && (
+                            <div className="absolute inset-0 flex items-center justify-center bg-background/50 z-10 rounded">
+                              <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
+                            </div>
+                          )}
                           <CategoryCombobox
                             categories={categories}
                             value={transaction.categoryId}
@@ -323,6 +331,9 @@ export function TransactionTable({
                             }
                             showBadge
                             align="start"
+                            disabled={updatingTransactionIds.has(
+                              transaction.id
+                            )}
                           />
                         </div>
                         <DropdownMenu>
@@ -354,7 +365,7 @@ export function TransactionTable({
                                 e.stopPropagation();
                                 if (
                                   confirm(
-                                    `Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`,
+                                    `Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`
                                   )
                                 ) {
                                   onDelete(transaction.id);
@@ -463,7 +474,7 @@ export function TransactionTable({
                       className={cn(
                         "grid grid-cols-[auto_120px_2fr_150px_180px_140px_auto_auto] gap-0 border-b border-border hover:bg-muted/50 cursor-pointer",
                         transaction.isReconciled && "bg-emerald-500/5",
-                        isFocused && "bg-primary/10 ring-1 ring-primary/30",
+                        isFocused && "bg-primary/10 ring-1 ring-primary/30"
                       )}
                     >
                       <div className="p-3">
@@ -493,7 +504,15 @@ export function TransactionTable({
                       <div className="p-3 text-sm text-muted-foreground">
                         {account?.name || "-"}
                       </div>
-                      <div className="p-3" onClick={(e) => e.stopPropagation()}>
+                      <div
+                        className="p-3 relative"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        {updatingTransactionIds.has(transaction.id) && (
+                          <div className="absolute inset-0 flex items-center justify-center bg-background/50 z-10 rounded">
+                            <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
+                          </div>
+                        )}
                         <CategoryCombobox
                           categories={categories}
                           value={transaction.categoryId}
@@ -502,6 +521,7 @@ export function TransactionTable({
                           }
                           showBadge
                           align="start"
+                          disabled={updatingTransactionIds.has(transaction.id)}
                         />
                       </div>
                       <div
@@ -509,7 +529,7 @@ export function TransactionTable({
                           "p-3 text-right font-semibold tabular-nums",
                           transaction.amount >= 0
                             ? "text-emerald-600"
-                            : "text-red-600",
+                            : "text-red-600"
                         )}
                       >
                         {transaction.amount >= 0 ? "+" : ""}
@@ -576,7 +596,7 @@ export function TransactionTable({
                                 e.stopPropagation();
                                 if (
                                   confirm(
-                                    `Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`,
+                                    `Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`
                                   )
                                 ) {
                                   onDelete(transaction.id);

components/ui/category-combobox.tsx

@@ -30,6 +30,7 @@ interface CategoryComboboxProps {
   align?: "start" | "center" | "end";
   width?: string;
   buttonWidth?: string;
+  disabled?: boolean;
 }
 
 export function CategoryCombobox({
@@ -41,6 +42,7 @@ export function CategoryCombobox({
   align = "start",
   width = "w-[300px]",
   buttonWidth,
+  disabled = false,
 }: CategoryComboboxProps) {
   const [open, setOpen] = useState(false);
 
@@ -71,9 +73,12 @@ export function CategoryCombobox({
   // Badge style trigger
   if (showBadge) {
     return (
-      <Popover open={open} onOpenChange={setOpen} modal={true}>
+      <Popover open={open && !disabled} onOpenChange={setOpen} modal={true}>
         <PopoverTrigger asChild>
-          <button className="flex items-center gap-1 hover:opacity-80">
+          <button
+            className="flex items-center gap-1 hover:opacity-80"
+            disabled={disabled}
+          >
             {selectedCategory ? (
               <Badge
                 variant="secondary"
@@ -168,13 +173,14 @@ export function CategoryCombobox({
 
   // Button style trigger (default)
   return (
-    <Popover open={open} onOpenChange={setOpen} modal={true}>
+    <Popover open={open && !disabled} onOpenChange={setOpen} modal={true}>
       <PopoverTrigger asChild>
         <Button
           variant="outline"
           role="combobox"
           aria-expanded={open}
           className={cn("justify-between", buttonWidth || "w-full")}
+          disabled={disabled}
         >
           {selectedCategory ? (
             <div className="flex items-center gap-2">