31 lines
893 B
TypeScript
31 lines
893 B
TypeScript
import { useEffect } from 'react';
|
|
import { useNavigation } from '@remix-run/react';
|
|
import { loadingBarService } from './LoadingBar';
|
|
|
|
/**
|
|
* 路由变化加载器组件
|
|
* 用于监听路由变化并控制全局加载进度条的显示
|
|
*/
|
|
export function RouteChangeLoader() {
|
|
// 获取路由转换状态
|
|
const navigation = useNavigation();
|
|
const isNavigating =
|
|
navigation.state === 'loading' ||
|
|
navigation.state === 'submitting';
|
|
|
|
// 监听路由变化状态，控制加载进度条
|
|
useEffect(() => {
|
|
// 当开始导航时，显示加载进度条
|
|
if (isNavigating) {
|
|
loadingBarService.show();
|
|
} else {
|
|
// 当导航完成时，隐藏加载进度条（带完成动画）
|
|
loadingBarService.hide();
|
|
}
|
|
}, [isNavigating]);
|
|
|
|
// 这个组件不渲染任何内容，仅监听路由变化
|
|
return null;
|
|
}
|
|
|
|
export default RouteChangeLoader;
|