長時間操作（オンチェーン書き込み等）への明示的ローディング表示

[YosukeMiyata]

背景

V3 ブランチの利用フィードバックとして、「コントラクトに書き込む系のものは待ち時間が長くて不安になるので、明示的なローディングが欲しい」という意見がありました。
Smart Wallet（ERC-4337）経由の書き込みは、署名〜ブロック確定まで おおむね 10〜30 秒以上 かかることが多く、approve + 本処理の 2 TX や BigBang のような デプロイ系 はさらに長くなります。コントラクト書き込み以外にも、IPFS アップロード・Namestone API・サブグラフ反映待ちなど、ユーザーが「止まった？」と感じやすい操作が複数存在します。

現状

良いパターン（参考にすべき）

• サンクス送信（$treeId_.thankstoken.send）: 専用の「送信中」フルパネル + 「ブロックチェーンへの書き込みを待っています」
• ロールシェア送信（AssistCreditSendSheet）: 同上
• Discord Bot THX 許可 / Discord 連携 / ログイン・サインアップ: ボタン文言またはスピナーで状態を表示

弱いパターン

• ボタン disabled のみで文言・画面変化なし
• ボタン文言のみ（「作成中...」等）で、フルスクリーンやステップ遷移なし
• 2 TX 連続（approve → 本処理）でフェーズが見えない
• TX 後のサブグラフ反映待ち（固定 3 秒 sleep）が loading 中に含まれ、理由が不明

対象操作一覧

オンチェーン書き込み（優先度高）

操作	画面 / フック	待ちが長くなる理由	現在の UX
ワークスペース作成（BigBang）	workspace.new / useBigBang	複数コントラクトデプロイ + 確定待ち	ボタン「作成中...」のみ
当番作成	$treeId_.roles_.new / useHats.createHat	IPFS → createHat TX + サブグラフ待ち 3 秒	ボタン「作成中...」のみ
当番編集	$treeId_.$hatId_.edit	IPFS → changeHatDetails / changeHatImageURI	ボタン「保存中...」のみ
担当追加（当番割当）	$treeId_.$hatId_.assign / useMintHatFromTimeFrameModule	mintHat TX + サブグラフ待ち 3 秒	ボタン「追加中...」のみ
担当の一時休止 / 再開 / 剥奪	$treeId_.$hatId_.$address	deactivate / reactivate / renounceHat	ボタン文言は変わる
ロールシェア初期発行	同上 / useFractionToken	mintInitialSupply TX	ボタン「初期発行中…」
ロールシェア送信	AssistCreditSendSheet	safeTransferFrom または multicall	Sending 画面あり（参考）
サンクス送信	$treeId_.thankstoken.send	mint / batchMint TX	Sending 画面あり（参考）
分配ルール作成（Splits）	$treeId_.splits.new	create TX + Namestone setName	ボタン「作成中…」のみ
分配実行（Splits）	$treeId_.splits.$splitId	Splits SDK distribute TX	ボタン disabled のみ
未回収報酬の引き出し	$treeId_.splits._index	Splits SDK warehouse.withdraw TX	ボタン disabled のみ
予約分配の作成	$treeId_.scheduled.new	createScheduledDistributor TX	ボタン「作成中…」
予約分配へのデポジット	scheduled.new / scheduled.$distributorId	approve + deposit の 2 TX	new は行単位「送信中…」、詳細は disabled のみ
予約分配の execute / reclaim	$treeId_.scheduled.$distributorId	各 1 TX	ボタン disabled のみ
クエスト作成	$treeId_.$hatId_.$address_.quest.new	approve + createQuest の 2 TX + IPFS	ボタン「作成中…」
クエスト各種操作	$treeId_.quest.$questId	申請 / 承認 / 却下 / 取下 / キャンセル	disabled のみ
権限付与 / 返上 / 剥奪	$treeId_.settings	mintHat / renounceHat / adminRevokeAuthorityHat	行・ボタン単位の文言変化
オーナー変更	$treeId_.settings	transferHat TX	disabled のみ（「変更」のまま）
WS 基本情報保存	$treeId_.settings	IPFS + 最大 2 TX	ボタン「保存中...」
Discord Bot THX 許可	$treeId_.discord-bot	ERC20 approve TX	ボタン「送信中…」（良好）

オンチェーン以外（優先度中）

操作	画面 / フック	待ちが長くなる理由	現在の UX
サインアップ	SignupForm	IPFS + Namestone setName	ボタン「保存中...」
プロフィール編集	MemberProfileEditDialog	IPFS + Namestone updateName	ボタン「保存中...」
ログイン後 Namestone 解決	login.tsx	API（最大 5 秒）	認証後スピナーあり
Smart Wallet プロビジョン	AccountMenu	Privy → Smart Wallet 準備	スピナーあり（良好）
IPFS メタデータ取得	各所	Pinata ゲートウェイ	Skeleton / 「読み込み中…」
TX 後サブグラフ反映待ち	workspace.new, roles.new, assign	固定 3 秒 sleep	loading 中に含まれるが理由不明

提案

AssistCreditSendSheet / $treeId_.thankstoken.send の Sending ステップ を app/components/composite/ に共通化し、長時間操作画面で再利用する。

// 例: TransactionProgressPanel
<TransactionProgressPanel
  title="ワークスペースを作成しています…"
  description="ブロックチェーンへの書き込みを待っています"
  phase="1/2 トランザクション処理中…"       // 2 TX 用（任意）
  secondaryPhase="索引を更新しています…"      // サブグラフ待ち用（任意）
/>