From bd61aaa5b2e6451888840b7e7e889fdeeeb53d36 Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Tue, 2 Dec 2025 14:47:43 +0000
Subject: [PATCH] Use startTransition for delete refresh and fix filter updates

- DeleteItemButton now uses startTransition for router.refresh()
- ListDetailView re-applies filters when initialItems changes
- This ensures deleted items disappear after refresh completes
- Transition provides better React 18 concurrent rendering support
---
 components/DeleteItemButton.tsx | 19 +++++++++++++------
 components/ListDetailView.tsx   |  8 ++------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/components/DeleteItemButton.tsx b/components/DeleteItemButton.tsx
index c41acf1..ffa84fc 100644
--- a/components/DeleteItemButton.tsx
+++ b/components/DeleteItemButton.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useTransition } from 'react'
 import { useRouter } from 'next/navigation'
 import { deleteItem } from '@/lib/actions'
 import { Trash2 } from 'lucide-react'
@@ -17,18 +17,25 @@ export default function DeleteItemButton({ itemId, listId, variant = 'full' }: D
   const { showToast } = useToast()
   const [isDeleting, setIsDeleting] = useState(false)
   const [showConfirm, setShowConfirm] = useState(false)
+  const [isPending, startTransition] = useTransition()
 
   const handleDelete = async (e: React.MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
     setIsDeleting(true)
+    
     try {
       await deleteItem(itemId)
       showToast('Task deleted successfully', 'success')
+      
+      // Reset state immediately
       setShowConfirm(false)
       setIsDeleting(false)
-      // Always refresh to update the UI
-      router.refresh()
+      
+      // Use startTransition to refresh the route
+      startTransition(() => {
+        router.refresh()
+      })
     } catch (error) {
       console.error('Error deleting item:', error)
       showToast('Failed to delete task', 'error')
@@ -54,14 +61,14 @@ export default function DeleteItemButton({ itemId, listId, variant = 'full' }: D
       <div className="flex items-center gap-2">
         <button
           onClick={handleDelete}
-          disabled={isDeleting}
+          disabled={isDeleting || isPending}
           className="px-3 sm:px-4 py-2 sm:py-2.5 bg-red-500 hover:bg-red-600 active:bg-red-700 disabled:bg-red-300 text-white rounded-lg text-xs sm:text-sm transition-colors tap-target-sm font-medium"
         >
-          {isDeleting ? 'Deleting...' : 'Confirm'}
+          {isDeleting || isPending ? 'Deleting...' : 'Confirm'}
         </button>
         <button
           onClick={handleCancel}
-          disabled={isDeleting}
+          disabled={isDeleting || isPending}
           className="px-3 sm:px-4 py-2 sm:py-2.5 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg text-xs sm:text-sm transition-colors tap-target-sm font-medium"
         >
           Cancel
diff --git a/components/ListDetailView.tsx b/components/ListDetailView.tsx
index e0b23df..7b73834 100644
--- a/components/ListDetailView.tsx
+++ b/components/ListDetailView.tsx
@@ -144,14 +144,10 @@ export default function ListDetailView({
   })
 
   // Update filtered items when initialItems changes (after refresh)
-  useEffect(() => {
-    setFilteredItems(initialItems)
-  }, [initialItems])
-
-  // Apply initial filters on mount
+  // Re-apply filters to the new data
   useEffect(() => {
     handleFiltersCallback(filters)
-  }, []) // Only run on mount
+  }, [initialItems, handleFiltersCallback, filters])
 
   // Determine which items to display
   const displayItems = debouncedQuery.trim() ? searchResults : filteredItems