ページ遷移の表示RouteProgressExperimental

ページの移動中に画面の上端へ出す細いバーです。進み具合（％）を持たず、描画しているあいだだけ流れます。

プレビュー

状態とバリエーション

枠の中だけ

placement="container" で、位置指定した親の上端に出ます。一覧の枠だけを読み込み直すときに使います。

読み込み中の画面に置く

Next.js なら app/loading.tsx に置くだけで、ページの移動中に上端へ出ます。プレビューは読み込み中のまま止めてあります。

動きを減らす設定

流れが止まり、上端に淡い色の帯が残ります。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
placement"viewport" | "container""viewport"viewport は画面の上端、container は位置指定した親の上端。
labelstring"Loading"読み上げる名前。
classNamestring-外側の枠に足すクラス。

使い方

"use client";

import * as React from "react";
import { Button, RouteProgress } from "@gunjo/ui";

export function NextPage() {
  const [loading, setLoading] = React.useState(false);
  const [page, setPage] = React.useState(1);

  // 本物のアプリでは、ページの読み込みが終わったところで loading を false にします
  const go = () => {
    if (loading) return;
    setLoading(true);
    window.setTimeout(() => {
      setLoading(false);
      setPage((n) => n + 1);
    }, 2500);
  };

  return (
    <div className="flex flex-col items-center gap-4">
      {loading ? <RouteProgress label="ページを読み込み中" /> : null}
      <p className="text-sm font-medium">いまは {page} ページ目</p>
      <Button onClick={go}>次のページへ移る</Button>
    </div>
  );
}

設計の判断

  • 進み具合（％）を持ちません。ページの読み込みは、どこまで進んだかを返しません。伸びていくバーにすると、止まっているのに進んで見えます。
  • フレームワークに依存しません。ルーターのイベントを購読しません。いつ描くかは呼び出し側が決めます。
  • 画面を塞ぎません。pointer-events を切ってあるので、下の画面はそのまま触れます。

使用コンポーネント

Progress

関連コンポーネント

  • Progress

    バーそのもの。画面の中に置く。

  • ActionProgress

    保存や送信のあいだ画面を塞ぐダイアログ。

  • Skeleton

    中身の輪郭を先に見せる。バーは出さない。

  • ProgressDialog

    長い処理を待つダイアログ。絵とキャンセルを持つ。

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

レスポンスと待ち時間設計 (Response Latency)