2cddb1ce7d
Installs nprogress and wires it to React Router's useNavigation() hook so a progress bar appears at the top of the page during route transitions. Themed to the site's --electric CSS variable with the spinner disabled. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
20 lines
423 B
TypeScript
20 lines
423 B
TypeScript
import { useNavigation } from "react-router";
|
|
import { useEffect } from "react";
|
|
import NProgress from "nprogress";
|
|
import "nprogress/nprogress.css";
|
|
|
|
NProgress.configure({ showSpinner: false });
|
|
|
|
export function NavigationProgress() {
|
|
const { state } = useNavigation();
|
|
|
|
useEffect(() => {
|
|
if (state !== "idle") {
|
|
NProgress.start();
|
|
} else {
|
|
NProgress.done();
|
|
}
|
|
}, [state]);
|
|
|
|
return null;
|
|
}
|