Kalana B. Thilakarathna
30 lines
767 B
TypeScript
30 lines
767 B
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
|
|
/**
|
|
* Thin top strip shown while `active` is true. Stays visible for at least
|
|
* `minDurationMs` so quick fetches don't produce an invisible flicker.
|
|
*/
|
|
export function TopLoader({ active, minDurationMs = 350 }: { active: boolean; minDurationMs?: number }) {
|
|
const [visible, setVisible] = useState(active)
|
|
|
|
useEffect(() => {
|
|
if (active) {
|
|
setVisible(true)
|
|
return
|
|
}
|
|
const t = setTimeout(() => setVisible(false), minDurationMs)
|
|
return () => clearTimeout(t)
|
|
}, [active, minDurationMs])
|
|
|
|
if (!visible) return null
|
|
return (
|
|
<div className="top-loader">
|
|
<div className="top-loader__bar">
|
|
<span className="top-loader__head" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|