@lobehub/ui/es/dashboard/RouteProgress/RouteProgress.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import { styles } from "./style.mjs";
import { useEffect, useState } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/dashboard/RouteProgress/RouteProgress.tsx
const FADE_MS = 200;
const CREEP_MS = 120;
function RouteProgress({ loading = false }) {
	const [progress, setProgress] = useState(null);
	useEffect(() => {
		if (loading) {
			const creep = window.setInterval(() => {
				setProgress((value) => {
					const from = value ?? 0;
					return from >= .9 ? from : from + (.9 - from) * .2;
				});
			}, CREEP_MS);
			return () => window.clearInterval(creep);
		}
		const settle = window.setTimeout(() => {
			setProgress((value) => value === null ? null : 1);
		}, 0);
		const hide = window.setTimeout(() => setProgress(null), FADE_MS);
		return () => {
			window.clearTimeout(settle);
			window.clearTimeout(hide);
		};
	}, [loading]);
	if (progress === null) return null;
	return /* @__PURE__ */ jsx("div", {
		"aria-hidden": true,
		className: styles.bar,
		style: {
			opacity: progress >= 1 ? 0 : 1,
			transform: `scaleX(${progress})`,
			transition: `transform ${FADE_MS}ms ease-out, opacity ${FADE_MS}ms ease-in`
		}
	});
}
RouteProgress.displayName = "RouteProgress";
//#endregion
export { RouteProgress as default };

//# sourceMappingURL=RouteProgress.mjs.map