From fbcf8fcd91cb6e182b04546f809d95d152bdb2bd Mon Sep 17 00:00:00 2001
From: Nicolas Cantu <nicolas.cantu@pm.me>
Date: Tue, 6 Jan 2026 15:34:26 +0100
Subject: [PATCH] Add spinner and page reload after cache update
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Motivations:**
- User requested spinner during cache update and page reload after completion
- Better UX: visual feedback during update and automatic refresh to show updated data

**Root causes:**
- No visual spinner during cache update operation
- Page was not reloaded after cache update, requiring manual refresh

**Correctifs:**
- Added Spinner component with CSS animation
- Modified button to show spinner during update
- Added page reload using router.reload() after successful cache update
- Wait 1 second after success message before reloading to show feedback

**Evolutions:**
- Better user experience with visual feedback during cache update
- Automatic page reload ensures updated data is displayed immediately
- Spinner provides clear indication that operation is in progress

**Pages affectées:**
- components/CacheUpdateManager.tsx
---
 components/CacheUpdateManager.tsx | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/components/CacheUpdateManager.tsx b/components/CacheUpdateManager.tsx
index f4b484d..4517f42 100644
--- a/components/CacheUpdateManager.tsx
+++ b/components/CacheUpdateManager.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { useRouter } from 'next/router'
 import { nostrAuthService } from '@/lib/nostrAuth'
 import { objectCache } from '@/lib/objectCache'
 import { syncUserContentToCache } from '@/lib/userContentSync'
@@ -49,7 +50,8 @@ function NotConnectedMessage(): React.ReactElement {
 function createUpdateHandler(
   setUpdating: (value: boolean) => void,
   setError: (value: string | null) => void,
-  setSuccess: (value: boolean) => void
+  setSuccess: (value: boolean) => void,
+  router: ReturnType<typeof useRouter>
 ): () => Promise<void> {
   return async (): Promise<void> => {
     try {
@@ -58,24 +60,31 @@ function createUpdateHandler(
       setSuccess(false)
       await updateCache()
       setSuccess(true)
+      // Wait a bit to show success message, then reload page
       setTimeout(() => {
-        setSuccess(false)
-      }, 3000)
+        router.reload()
+      }, 1000)
     } catch (e) {
       const errorMessage = e instanceof Error ? e.message : 'Erreur lors de la mise à jour du cache'
       setError(errorMessage)
       console.error('Error updating cache:', e)
-    } finally {
       setUpdating(false)
     }
   }
 }
 
+function Spinner(): React.ReactElement {
+  return (
+    <div className="inline-block animate-spin rounded-full h-4 w-4 border-2 border-neon-cyan border-t-transparent mr-2"></div>
+  )
+}
+
 export function CacheUpdateManager(): React.ReactElement {
+  const router = useRouter()
   const [updating, setUpdating] = useState(false)
   const [success, setSuccess] = useState(false)
   const [error, setError] = useState<string | null>(null)
-  const handleUpdateCache = createUpdateHandler(setUpdating, setError, setSuccess)
+  const handleUpdateCache = createUpdateHandler(setUpdating, setError, setSuccess, router)
   const state = nostrAuthService.getState()
   const isConnected = state.connected && state.pubkey
 
@@ -97,8 +106,9 @@ export function CacheUpdateManager(): React.ReactElement {
           void handleUpdateCache()
         }}
         disabled={updating || !isConnected}
-        className="w-full py-3 px-6 bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan rounded-lg font-medium transition-all border border-neon-cyan/50 hover:shadow-glow-cyan disabled:opacity-50 disabled:cursor-not-allowed"
+        className="w-full py-3 px-6 bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan rounded-lg font-medium transition-all border border-neon-cyan/50 hover:shadow-glow-cyan disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
       >
+        {updating && <Spinner />}
         {updating ? 'Mise à jour en cours...' : 'Mettre à jour le cache'}
       </button>
     </div>