在 React/Next.js 中不使用 <Suspense> 或 onLoad 监听器加载屏幕的最佳方法是什么？

Question

我目前正在改进几年前建立的一个网站，使用我多年来学到的新工具和最佳实践来更新它。我遇到的一个障碍是有效地处理加载屏幕。

这个想法很简单。在加载所有内容（DOM、资源、动画）时显示加载屏幕，然后在整个页面准备就绪时平滑淡出。这在用户第一次访问或导航到需要新数据、样式或动画的新页面时特别有用。

我尝试过使用react模块，它只在第一次访问任何页面时显示加载屏幕，切换到另一个页面，您可以看到加载屏幕要隐藏的所有故障/暂停。

<Suspense fallback={<ScreenLoader />}>
   <MyAppComponent/>
</Suspense>

我还尝试过 onLoad 事件侦听器来更改加载程序状态，但由于某种原因它从未被触发。

...
const [isLoadeing, setIsLoading] = useState(true);
...

<>
   <ScreenLoader loading={!isLoading}/>
   <div onLoad={() => setIsLoading(false)}  classname={`${isLoading && 'hidden'}`}>
      <MyAppComponent/>
   </div>
</>

我目前正在使用带有 setTimeout 的定时加载程序。

setTimeout(() => setIsLoader(false), 2500)

这感觉不对。解决这个问题最好的方法是什么

Answer 1

这是我使用 useEffect 的加载器：

"use client";

import { usePathname, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import "./index.css";

export function Loader() {
  const [routeLoading, setRouteLoading] = useState(true);

  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    setTimeout(() => {
      setRouteLoading(false);
    }, 10);
    return () => {
      setRouteLoading(true);
    };
  }, [pathname, searchParams]);

  return routeLoading && <div className="loader" />;
}