26 lines
591 B
TypeScript
26 lines
591 B
TypeScript
import { useRouterState } from "@tanstack/react-router";
|
|
import { useEffect, useRef } from "react";
|
|
import LoadingBar, { type LoadingBarRef } from "react-top-loading-bar";
|
|
|
|
export function NavigationProgress() {
|
|
const ref = useRef<LoadingBarRef>(null);
|
|
const state = useRouterState();
|
|
|
|
useEffect(() => {
|
|
if (state.status === "pending") {
|
|
ref.current?.continuousStart();
|
|
} else {
|
|
ref.current?.complete();
|
|
}
|
|
}, [state.status]);
|
|
|
|
return (
|
|
<LoadingBar
|
|
color="var(--muted-foreground)"
|
|
height={2}
|
|
ref={ref}
|
|
shadow={true}
|
|
/>
|
|
);
|
|
}
|