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 { useState } from 'react'
|
||||||
|
import { useRouter } from 'next/router'
|
||||||
import { nostrAuthService } from '@/lib/nostrAuth'
|
import { nostrAuthService } from '@/lib/nostrAuth'
|
||||||
import { objectCache } from '@/lib/objectCache'
|
import { objectCache } from '@/lib/objectCache'
|
||||||
import { syncUserContentToCache } from '@/lib/userContentSync'
|
import { syncUserContentToCache } from '@/lib/userContentSync'
|
||||||
@ -49,7 +50,8 @@ function NotConnectedMessage(): React.ReactElement {
|
|||||||
function createUpdateHandler(
|
function createUpdateHandler(
|
||||||
setUpdating: (value: boolean) => void,
|
setUpdating: (value: boolean) => void,
|
||||||
setError: (value: string | null) => void,
|
setError: (value: string | null) => void,
|
||||||
setSuccess: (value: boolean) => void
|
setSuccess: (value: boolean) => void,
|
||||||
|
router: ReturnType<typeof useRouter>
|
||||||
): () => Promise<void> {
|
): () => Promise<void> {
|
||||||
return async (): Promise<void> => {
|
return async (): Promise<void> => {
|
||||||
try {
|
try {
|
||||||
@ -58,24 +60,31 @@ function createUpdateHandler(
|
|||||||
setSuccess(false)
|
setSuccess(false)
|
||||||
await updateCache()
|
await updateCache()
|
||||||
setSuccess(true)
|
setSuccess(true)
|
||||||
|
// Wait a bit to show success message, then reload page
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setSuccess(false)
|
router.reload()
|
||||||
}, 3000)
|
}, 1000)
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
const errorMessage = e instanceof Error ? e.message : 'Erreur lors de la mise à jour du cache'
|
const errorMessage = e instanceof Error ? e.message : 'Erreur lors de la mise à jour du cache'
|
||||||
setError(errorMessage)
|
setError(errorMessage)
|
||||||
console.error('Error updating cache:', e)
|
console.error('Error updating cache:', e)
|
||||||
} finally {
|
|
||||||
setUpdating(false)
|
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 {
|
export function CacheUpdateManager(): React.ReactElement {
|
||||||
|
const router = useRouter()
|
||||||
const [updating, setUpdating] = useState(false)
|
const [updating, setUpdating] = useState(false)
|
||||||
const [success, setSuccess] = useState(false)
|
const [success, setSuccess] = useState(false)
|
||||||
const [error, setError] = useState<string | null>(null)
|
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 state = nostrAuthService.getState()
|
||||||
const isConnected = state.connected && state.pubkey
|
const isConnected = state.connected && state.pubkey
|
||||||
|
|
||||||
@ -97,8 +106,9 @@ export function CacheUpdateManager(): React.ReactElement {
|
|||||||
void handleUpdateCache()
|
void handleUpdateCache()
|
||||||
}}
|
}}
|
||||||
disabled={updating || !isConnected}
|
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'}
|
{updating ? 'Mise à jour en cours...' : 'Mettre à jour le cache'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user