用戶在混音運行中單擊鏈接或 NavLink 時如何處理加載時間

Question

我正在構建一個帶有 remix run 並使用嵌套組件的應用程序。 當您單擊 NavLink 或加載具有加載器 function 的組件的鏈接以從 api 加載數據時，獲取響應和呈現給用戶的速度可能非常慢。 理想情況下，我希望瀏覽器中的 URL 在單擊時立即更改，並在加載組件時加載 animation。 我知道如何使用 react 和 useEffect 掛鈎實現加載 animation，但是我不確定您如何使用 remix 和 Link/NavLink 標簽執行此操作。

Answer 1

Remix 嘗試在導航時模擬瀏覽器行為，因此在加載程序解析之前它不會更改 URL。

但是，您可以通過使用useNavigation顯示一些加載 UI 來改進 UX。

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>
  );
}

如果加載程序中的數據速度極慢並且您無法加快速度，您可能希望顯示后備 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>
  );
}

Answer 2

以下似乎包含答案：

import { useNavigation } from "@remix-run/react";

function SomeComponent() {
  const navigation = useNavigation();
  navigation.state;
  navigation.location;
  navigation.formData;
  navigation.formAction;
  navigation.formMethod;
}

您似乎能夠連接到 navigation.state，當單擊鏈接/NavLink 時，它會從空閑狀態變為加載狀態。

用戶在混音運行中單擊鏈接或 NavLink 時如何處理加載時間

問題描述

2 個解決方案

解決方案1
1 已采納 2023-01-30 16:04:25

解決方案2
0 2023-01-28 18:22:56

用戶在混音運行中單擊鏈接或 NavLink 時如何處理加載時間

問題描述

2 個解決方案

解決方案1 1 已采納 2023-01-30 16:04:25

解決方案2 0 2023-01-28 18:22:56

解決方案1
1 已采納 2023-01-30 16:04:25

解決方案2
0 2023-01-28 18:22:56