当用户在 remix 运行中单击链接或导航链接时如何处理加载时间

Question

当用户在 remix 运行中单击链接或导航链接时如何处理加载时间

我正在构建一个带有 remix run 并使用嵌套组件的应用程序。当您单击加载具有加载器函数以从 api 加载数据的组件的 NavLink 或 Link 时，获取响应并呈现给用户的速度可能会非常慢。理想情况下，我希望浏览器中的 URL 在单击时立即更改，并在加载组件时加载动画。我知道如何使用 React 和 useEffect 钩子实现加载动画，但是我不确定如何使用 remix 和 Link/NavLink 标签来实现这一点。

Answer 1

ris*_*ott 5

Remix 尝试在导航时模拟浏览器行为，因此在加载程序解析之前它不会更改 URL。

但是，您可以通过显示一些加载 UI 来改进 UX useNavigation。

export default function App() {
  const navigation = useNavigation();
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        {navigation.state !== "idle" ? <div>Loading...</div> : null}
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

Run Code Online (Sandbox Code Playgroud)

如果加载器中的数据非常慢并且您无法加快速度，您可能需要显示后备 UI，例如可以使用defer.

export function loader({ params }: LoaderArgs) {
  return defer({
    // NOTE: `getFoo` isn't awaited
    foo: getFoo()
  });
}

export default function Component() {
  const data = useLoaderData<typeof loader>();
  return (
    <main>
      <h1>Foo</h1>
      <Suspense fallback={<div>Skeleton UI...</div>}>
        <Await
          resolve={data.foo}
          errorElement={
            <div>Error loading foo</div>
          }
        >
          {(foo) => (
            <div>
              {JSON.stringify(foo, null, 2)}
            </div>
          )}
        </Await>
      </Suspense>
    </main>
  );
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	2 年，11 月前
查看次数：	1751 次
最近记录：	2 年，6 月前