You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.4 KiB
47 lines
1.4 KiB
import { useNostr } from '@/providers/NostrProvider' |
|
import { cn } from '@/lib/utils' |
|
import { Loader2 } from 'lucide-react' |
|
import { useEffect, useState } from 'react' |
|
import { useTranslation } from 'react-i18next' |
|
|
|
const SHOW_AFTER_MS = 400 |
|
|
|
/** |
|
* Shown while the logged-in account’s relay list and replaceable events are being merged from IndexedDB + network. |
|
* Debounced so fast sessions don’t flash the bar. |
|
*/ |
|
export default function StartupSessionBanner() { |
|
const { isAccountSessionHydrating } = useNostr() |
|
const { t } = useTranslation() |
|
const [visible, setVisible] = useState(false) |
|
|
|
useEffect(() => { |
|
if (!isAccountSessionHydrating) { |
|
setVisible(false) |
|
return |
|
} |
|
const id = window.setTimeout(() => setVisible(true), SHOW_AFTER_MS) |
|
return () => clearTimeout(id) |
|
}, [isAccountSessionHydrating]) |
|
|
|
if (!visible) return null |
|
|
|
return ( |
|
<div |
|
role="status" |
|
aria-live="polite" |
|
aria-busy="true" |
|
className={cn( |
|
'flex w-full shrink-0 items-center justify-center gap-2 border-b border-border', |
|
'bg-background px-3 py-2 text-center text-sm text-muted-foreground' |
|
)} |
|
> |
|
<Loader2 className="size-4 shrink-0 animate-spin text-muted-foreground" aria-hidden /> |
|
<span> |
|
{t('startupSessionHydrating', { |
|
defaultValue: 'Syncing your relays and profile from the network…' |
|
})} |
|
</span> |
|
</div> |
|
) |
|
}
|
|
|