Add spinner and page reload after cache update

**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
This commit is contained in:
Nicolas Cantu 2026-01-06 15:34:26 +01:00
parent 29cb20c614
commit fbcf8fcd91

View File

@ -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>