进度条优化

app/components/ui/RouteChangeLoader.tsx

@@ -0,0 +1,31 @@
+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;