Skip to content

ターミナルスピナー表示時のレイアウトジッター削減

原文(日本語に翻訳)

ストリーミング中にスピナーが表示・非表示される際のターミナルレイアウトのジッター(ちらつき)を削減しました。

原文(英語)

Reduced layout jitter in the terminal when the spinner appears and disappears during streaming

概要

Claude Codeがストリーミング応答を行う際、スピナー(読み込みインジケータ)が表示・非表示を繰り返すことでターミナルのレイアウトがちらついていた問題が改善されました。この修正により、より滑らかで安定した視覚体験が提供されます。

基本的な使い方

スムーズなストリーミング体験

bash
claude

# 長い応答を生成させる
> "Reactの最新のベストプラクティスを詳しく説明して"

# ストリーミング中
# 以前: スピナーの表示/非表示でテキストが上下に揺れる
# 現在: スピナーが滑らかに表示され、レイアウトが安定

ツール実行時の視覚的安定性

bash
> "このプロジェクトの全ファイルを分析して"

# 複数のツール呼び出しが連続
# Bashツール → Readツール → Grepツール...

# 各ツール実行時にスピナーが表示
# 以前: ツールごとにレイアウトがずれる
# 現在: レイアウトが安定したまま進行

実践例

長時間のタスク実行

bash
> "すべてのTypeScriptファイルをESLintでチェックして"

# スピナー表示:
# 🔄 Analyzing TypeScript files...

# 以前の動作:
# - スピナーが表示されるとテキストが下に押し出される
# - スピナーが消えるとテキストが上に戻る
# - 視覚的に不快なちらつき

# 現在の動作:
# - スピナーがスムーズにフェードイン
# - レイアウトの変動が最小限
# - 目に優しい体験

複数ファイルの編集

bash
> "src/components/ 内の全ファイルにdark modeサポートを追加して"

# 各ファイル編集時にスピナーが表示
# File 1: ✓ Updated
# File 2: 🔄 Updating...
# File 3: Pending...

# レイアウトが安定しているため、進捗状況が追いやすい

インタラクティブな対話

短い応答とツール実行が混在する場合:

bash
> "package.jsonを読んで、依存関係を確認して、アップデートを提案して"

# 1. Readツール実行 🔄
# 2. 分析中 🔄
# 3. Web検索 🔄
# 4. 提案生成 🔄

# 各ステップでスピナーが表示されるが
# レイアウトは安定したまま

Plan Modeでの体験向上

bash
> "大規模なリファクタリングを計画して"

# Plan Mode に移行
# 🔄 Exploring codebase...
# 🔄 Analyzing architecture...
# 🔄 Generating plan...

# 長時間のバックグラウンド処理でも
# ターミナル表示が安定

注意点

  • 視覚的な安定性: この改善は視覚的な体験に焦点を当てており、機能的な変更はありません。ツールの実行速度や応答時間には影響しません。

  • ターミナルエミュレータの互換性: 一部の古いターミナルエミュレータでは、スピナーアニメーションが正しく表示されない場合があります。iTerm2、Windows Terminal、または最新のターミナルの使用を推奨します。

  • Reduced Motionモード: モーション削減モードを有効にしている場合(v2.1.30で追加)、スピナーアニメーションは最小限に抑えられます:

    json
    {
      "reducedMotion": true
    }
  • スピナーの種類: Claude Codeは複数のスピナータイプを使用します:

    • 🔄 ツール実行中
    • ⏳ バックグラウンドタスク実行中
    • 📡 API通信中
  • パフォーマンスへの影響: レイアウトジッター削減により、CPU使用率がわずかに改善される場合があります(頻繁な再描画が減るため)。

  • カスタマイゼーション: 現時点では、スピナーのスタイルやアニメーションをカスタマイズすることはできません。

関連情報