如何设置Spinner加载状态？文章页跳转数据加载等待场景

设置时机 #

• 当路由开始跳转（用户点击进入文章页）时，将isLoading设为true，显示Spinner。
• 当路由跳转完成（数据加载完成、页面渲染完毕）或跳转出错时，将isLoading设为false，隐藏Spinner。

代码修改方案 #

利用Next.js的useRouter监听路由事件，实现加载状态的切换：

import { useState, useEffect } from "react";
import { useRouter } from 'next/router'; // 导入useRouter

import Recent from "../../components/sections/articles/recent";
import Color from "../../components/utils/page.colors.util";
import colors from "../../content/articles/_colors.json";
import settings from "../../content/_settings.json";
import Spinner from "../../components/sections/spinner/Spinner";

export default function Articles({ mediumArticles }) {
  const [isLoading, setIsLoading] = useState(false);
  const router = useRouter();

  useEffect(() => {
    // 路由开始跳转时触发，显示加载状态
    const handleRouteStart = () => setIsLoading(true);
    // 路由完成/出错时触发，关闭加载状态
    const handleRouteEnd = () => setIsLoading(false);

    // 绑定路由事件监听
    router.events.on('routeChangeStart', handleRouteStart);
    router.events.on('routeChangeComplete', handleRouteEnd);
    router.events.on('routeChangeError', handleRouteEnd);

    // 组件卸载时移除监听
    return () => {
      router.events.off('routeChangeStart', handleRouteStart);
      router.events.off('routeChangeComplete', handleRouteEnd);
      router.events.off('routeChangeError', handleRouteEnd);
    };
  }, [router]);

  return (
    <>
      {isLoading && <Spinner />}
      <Color colors={colors} />
      <Recent mediumArticles={mediumArticles} />
    </>
  );
}

export async function getServerSideProps({ res }) {
  res.setHeader(
    "Cache-Control",
    "public, s-maxage=600, stale-while-revalidate=59"
  );

  console.log(settings.username.medium);

  const [mediumRSS] = await Promise.all([
    fetch(
      `https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/${settings.username.medium}`
    ),
  ]);

  let [mediumArticles] = await Promise.all([mediumRSS.json()]);

  return { props: { mediumArticles } };
}

补充说明 #

• 直接访问文章页时，getServerSideProps在服务端完成数据获取，页面会带着渲染好的内容返回，此时不会触发路由跳转事件，因此不会显示Spinner，符合预期。
• 如果你的Recent组件内部还有额外的数据请求，需要在该组件内部单独处理加载状态，或者通过回调通知父组件切换isLoading。

内容的提问来源于stack exchange，提问作者kihiuFrank