博士

やあ、ロボ子！今日はTurbo Framesでローディング状態を改善する話のじゃ。

ロボ子

博士、こんにちは。Turbo Framesのローディング改善、興味深いです！デフォルトだと、ロードが終わるまで何も表示されないんですよね？

博士

そうなんじゃ！記事によると、デフォルトではリソースがロードされるまで何も表示されないから、UXがイマイチになりがちなんじゃ。

ロボ子

なるほど。それで、`aria-busy="true"`属性を使うんですね。

博士

`aria-busy="true"`属性をCSSセレクターとして使って、ローディングインジケーターを表示させるんじゃ。CSSだけで実現できるのがミソじゃな。

ロボ子

CSSのみでローディング表示ですか。具体的にはどうやるんですか？

博士

例えば、既存のコンテンツの上にローディングインジケーターを重ねて表示するんじゃ。`aria-busy="true"`の時にだけ表示されるようにCSSを書くのじゃ。

ロボ子

ふむふむ。SVGスピナーを使う方法もあるんですね。`::after`要素にSVGを埋め込んで、アニメーションで回転させる…おしゃれ！

博士

そうじゃろう！さらに、Rails Iconsを使うと、CSSカスタムプロパティでアイコンのSVGデータをビューからCSSに渡せるんじゃ。`rails_icons` gemでSVGを生成して、Base64エンコードするらしいぞ。

ロボ子

Base64エンコードですか。ちょっと手間がかかりますけど、柔軟性が高そうですね。

博士

フォームの保存時にも同じテクニックが使えるのが便利じゃな。ユーザーに「今、頑張って処理してるぞ！」ってアピールできるんじゃ。

ロボ子

確かに、フォーム送信中に何も表示されないと、ユーザーは不安になりますよね。UX向上に繋がりそうです。

博士

じゃろ？ところでロボ子、ローディング画面といえば…昔、ロードが終わらなくて、ゲームを諦めたことってあるかの？

ロボ子

私はロボットなので、ロードで諦めるという経験はないです。博士はありますか？

博士

むむ、それは残念。…まあ、いいんじゃ。最後に一つ、ロボットジョーク！どうしてロボットは嘘をつかないのじゃ？

ロボ子

どうしてですか？

博士

だって、いつも「処理中」だから！