| 5 | import { Icon } from './ui/icon.tsx' |
| 6 | |
| 7 | function EpicProgress() { |
| 8 | const transition = useNavigation() |
| 9 | const busy = transition.state !== 'idle' |
| 10 | const delayedPending = useSpinDelay(busy, { |
| 11 | delay: 600, |
| 12 | minDuration: 400, |
| 13 | }) |
| 14 | const ref = useRef<HTMLDivElement>(null) |
| 15 | const [animationComplete, setAnimationComplete] = useState(true) |
| 16 | |
| 17 | useEffect(() => { |
| 18 | if (!ref.current) return |
| 19 | if (delayedPending) setAnimationComplete(false) |
| 20 | |
| 21 | const animationPromises = ref.current |
| 22 | .getAnimations() |
| 23 | .map(({ finished }) => finished) |
| 24 | |
| 25 | void Promise.allSettled(animationPromises).then(() => { |
| 26 | if (!delayedPending) setAnimationComplete(true) |
| 27 | }) |
| 28 | }, [delayedPending]) |
| 29 | |
| 30 | return ( |
| 31 | <div |
| 32 | role="progressbar" |
| 33 | aria-hidden={delayedPending ? undefined : true} |
| 34 | aria-valuetext={delayedPending ? 'Loading' : undefined} |
| 35 | className="fixed inset-x-0 left-0 top-0 z-50 h-[0.20rem] animate-pulse" |
| 36 | > |
| 37 | <div |
| 38 | ref={ref} |
| 39 | className={cn( |
| 40 | 'h-full w-0 bg-foreground duration-500 ease-in-out', |
| 41 | transition.state === 'idle' && |
| 42 | (animationComplete |
| 43 | ? 'transition-none' |
| 44 | : 'w-full opacity-0 transition-all'), |
| 45 | delayedPending && transition.state === 'submitting' && 'w-5/12', |
| 46 | delayedPending && transition.state === 'loading' && 'w-8/12', |
| 47 | )} |
| 48 | /> |
| 49 | {delayedPending && ( |
| 50 | <div className="absolute flex items-center justify-center"> |
| 51 | <Icon |
| 52 | name="update" |
| 53 | size="md" |
| 54 | className="m-1 animate-spin text-foreground" |
| 55 | aria-hidden |
| 56 | /> |
| 57 | </div> |
| 58 | )} |
| 59 | </div> |
| 60 | ) |
| 61 | } |
| 62 | |
| 63 | export { EpicProgress } |