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:
parent
29cb20c614
commit
fbcf8fcd91
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user