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;