他のウェブサイトでは、別のページが読み込まれている間、現在のページを完全に表示したままにし、画面全体にローディングバーを表示しているのを見たことがあります。そのバージョンを試してみる価値があるかもしれません。
「いいね！」 8
もう一つ追加したい点があります。Discourse と、ローディングスライダーを使用している他のいくつかのウェブサイトとの間に、もう一つの大きな違いがあることに気づいたようです。比較対象としている 3 つのウェブサイトは https://www.youtube.com、https://github.com、および https://bookmeter.com です。主な違いは以下の通りです：
- 前の投稿でも触れた通り、これらのウェブサイトは、表示されるコンテンツを空白のページに置き換えるのではなく、新しいコンテンツが読み込まれるまで、以前のコンテンツを画面に表示し続けます（フェードアウトなどの演出はありません）。
- 新しいページが読み込まれた後も、画面に表示され続けるコンテンツが一般的に非常に多くなります。これらのウェブサイトはトップメニューに非常に多くのコンテンツを備えており、クリックしたリンクによっては、セカンダリのトップメニューが表示され続けることもあります。また、サイドメニューも、新しいページに移動した後も表示され続ける場合があります。一方、Discourse のトップメニューは非常にシンプルで、常に残っているのは検索アイコン、ハンバーガーメニューアイコン、ユーザーアイコンのみです。
新しいコンテンツが準備できるまで古いコンテンツを保持するように動作を変更すれば、うまくいくかもしれません。しかし、Discourse では移動先に関わらず非常に多くのコンテンツが入れ替わってしまうため、単純にそれがうまくいかない可能性もあります。
「いいね！」 7
私の環境では、カテゴリバナー、タグバナー、トピックリストに表示されるカテゴリを示すサイドバーを使用しています。Discourse はデフォルトで、ユーザープロフィールやグループなど、上部またはサイドバーを維持するいくつかのルートも備えています。これらの画面要素が一度消えてから同じ場所に再表示されるのを避けるため、遷移前に従来の表示を維持することを強く推奨します。
「いいね！」 7
はい、私たちは約1週間前から新しいDiscourseのスライダーテーマコンポーネントをこのように使用しており、非常に気に入っています。ボディの遷移コードを無効にし、スライダーのみを使用しています。
ページの読み込み（または再読み込み）は、ブラウザの自然な動作として遷移を処理するため、フェードアウトやHTMLの消去などの追加コードは不要です。このスライダーは、追加のページ遷移コード（フェードアウト、消去など）なしで見栄えが良く、1週間前から当サイトの運用でこのように使用しています。
この素晴らしいスライダーと、テーマコンポーネントとしてカスタマイズできる機能を提供してくださり、ありがとうございます！
「いいね！」 4
おそらく私の記述を誤解されたようですが、私が説明したのは現在の Discourse のテーマコンポーネントの動作とは異なります。現在、Discourse は新しいコンテンツを読み込んでいる間、ほとんどのコンテンツを空白のページにしてしまいます。一方、私がリンクした他のウェブサイトは、新しいコンテンツを読み込んでいる間も現在のコンテンツを保持します。これは同じことではありません。
「いいね！」 1
@seanblue が上記で言及された内容は、私が正確に理解したと確信しています。おっしゃっていることは非常にシンプルで、あなたの投稿は私の見解では理解しやすかったです。
Discourse のオリジナルのスライダーテーマコンポーネントで、SCSS の body 遷移（アニメーション）をコメントアウトしてみてください（参考までに、私は 1 週間前にこのテーマコンポーネントをフォークして変更を加えましたが、テーマコンポーネントを変更する方法は他にもあります）。
そうすると、動作はあなたが説明された通りになります。
現在のページ（私たちの変更版では）は、新しいコンテンツが読み込まれている間に表示されます（これは、追加の body アニメーションがない通常のページ読み込みの動作そのものです）。現在の Discourse の実験で見られる「フェード」や「空白化」は、1 週間前にリリースされたバージョンのテーマに含まれていた CSS の body アニメーションコードによるものです（以下参照）。
CSS の body アニメーションがない場合、読み込み中のスライダーは通常の動作を行い、body の「空白化」や「フェード」は発生しません。なぜなら、そのアニメーションは（元の）テーマコンポーネントの CSS で指定されていたからです。多くのウェブサイト（あなたが言及された通り）は body に追加のアニメーションを加えていません。そのため、あなたは次のようにおっしゃったのです。
これは「標準的な動作」です。これは CSS から body アニメーションを削除した後に起こります（私は 1 週間前のリリースについて話しています。追跡はしていませんが、GitHub によると、私たちの変更版は以下の通りです）。
この変更を 1 週間前に行った後、スライダーは（ユーザーの方々によると）非常に良く見えます。追加の body アニメーション（フェードイン/アウト、空白化アニメーションなど）は必要ありません。
以下は、この素晴らしいスライダーの「初期リリース」でコメントアウトした CSS です。これは私たち（そしてユーザーの方々）にとって非常にうまく機能したため、うまく動作するようになった以降は、その後の「コンビネーションスピンナー、空白化」アニメーションや body 実験コードの変更を追跡していませんでした（meta での実験の結果を除きます）。
// body #main-outlet {
// transition: opacity 0.2s ease;
// }
// body.loading #main-outlet {
// opacity: 0.2;
// transition: opacity var(--loading-duration) ease;
// }
参考になれば幸いです。
「いいね！」 5
ああ、フォーク版や改造版を使っているとは気づきませんでした。すみません。このバージョンがあなたにとってうまくいっているようで何よりです。メタでもおそらく同様のアプローチを試してくれるでしょう。
「いいね！」 6
@david / @awesomerobot これまでこの件について何度か議論してきましたが、フェードアウトを実装する前に、元の方式（わずかな改良を加えたもの）を試すべきだと考えます。クリック時のオプションをまとめます。
- 既存のコンテンツを画面上に残し、新しいコンテンツが準備できたら切り替える。
- 「白画面」を表示し、新しいコンテンツが準備できたら切り替える。
- 不透明度のあるコンテンツ（0% から 40% 程度）に遷移し、新しいコンテンツが準備できたら切り替える。
これらのいずれの場合でも、以下の条件を追加することを確信しています。「コンテンツの読み込みに 2 秒以上かかる場合は、スピナーを表示する」
(1) は遷移状態を最小限に抑える唯一の解決策です。確かに、「クリックしたのに何も起こっていないように見える」という点では慣れが必要ですが、これはウェブの基本的な動作です。他のサイトへのリンクをクリックした際、ブラウザが白画面を表示したり、フェードアウトさせたりすることはありません。
(2) は現在の方式ですが、一部の人には厳しいとされています。このパターンの最大の利点の一つは、白画面を避けることができる点です。これは従来のスピナーからのごくわずかな変更でしかありません。
(3) は非常に気が散る可能性があります。適切な不透明度を見つけるのは難しく、私が以前試した経験では、1 時間使用すると非常に疲労が蓄積しました。
@david 私たちは (2) を正式に試しましたので、今週 (1) を正式に試してみませんか。画面の変化を最小限に抑えるため、おそらくこれが最善だと考えます。
「いいね！」 9
それは違います。クリックと同時に即座に読み込みアニメーションが始まります。リンクをクリックする際にブラウザのタブを確認してみてください。クリックまたはタップすると、即座にファビコンから読み込みスピナーに切り替わることに気づくはずです。
「いいね！」 5
すみません、はい、私の言いたい点はそこです。ここでは「標準的」なナビゲーションに非常に近いものをシミュレーションできます（例えば、読み込み中にタブのアイコンを変更したり、タブのテキストを変更したりできます）。
サイトで任意のリンクをクリックすると、現在のページが完全に白くなったり、不透明になったりするわけではありません。DNS が新しいサイトに対して解決され、コンテンツのレンダリングが準備できるまでの間、古いコンテンツは一定時間画面に残ります。
このコンポーネントの大きな強みは、中間状態を減らす点にあると思います。これを偽装することで「標準的なブラウザのナビゲーション」のように感じさせることができれば、素晴らしいと思います。
「いいね！」 12
気にしないでください。スライダーは（デスクトップ用に数ピクセル追加した状態で）とても気に入っています。ただし、本文のアニメーション（画面の空白、フェードイン/アウトなど）は不要だとわかりました。
スライダーは読み込み状態を適切に示しており、ページはボディ遷移の CSS や追加のスピナーを追加しなくても、自然に読み込まれて切り替わります。この状態で約8〜9日間運用しており、ユーザーも満足していますし、私も気に入っています。ユーザーは「フェードイン/アウト」のアニメーションや「画面を空白にするアニメーション」、さらには「追加のスピナー＋スライダーのアニメーション」を好んでいませんでした。ただ、私たちのユーザーは一般的に、不要なアニメーションや余計なウェブガジェットを好まない傾向があります。
メタチームがこのコードをテーマコンポーネントとして維持するか、少なくともサイト所有者が最終決定された設定を上書きし続けられるようにすることを願っています。ページ遷移に関して、私たちのユーザーが好むものと他の人が好むものは異なるようですから。
迷ったときは「優しく接し、サイト側に選択権を与える」のが良いアプローチだと私は思います。
「いいね！」 3
良さそうですね。コンポーネントを元の実装に戻しました。
「いいね！」 7
「ああ、まずい、2 秒経っちゃった、スピナーを表示しよう」という処理は、確かに小さくても重要な追加事項だと思います。
それ以外は、人々の反応を見てみましょう。おそらくこれがリリースするバージョンになるでしょう。
「いいね！」 8
どこに表示すべきですか？モーダルとして表示するのでしょうか？それとも、スピナーを表示するために2秒後に#main-outletを非表示にするべきでしょうか？
「いいね！」 4
メインのアウトレートを非表示にしようと思います。しきい値を調整したいですね。2 は少し恣意的なので、3、4、5 のあたりはいかがでしょうか？
「いいね！」 6
スピナーは 2 秒後に表示されます：
「いいね！」 12
2 秒後に追加のスピンナーレイヤーを削除しないままにすると、ユーザーにとって状況が奇妙になってしまいます。この方法なら、両方の利点を活かすことができます。1. スライダーのおかげで超高速であるかのように見せる（実際にはここで少し手を抜いています）。2. 読み込みが停止した場合の隙間を埋める（心理的な遷移）。
よくできました！
「いいね！」 8
シミュレートされた低速ネットワークで試しましたが、2 秒後のスピナーは確かに良い印象です。重申しますが、デスクトップ（少なくともやや大きなモニターの場合）では、ローディングスライダーはほぼ目立たない状態です。垂直方向にさらに 2〜3 ピクセル追加すれば、大きく改善すると思います。
「いいね！」 5
Discourse を使い始めたばかりの者ですが、このスレッドを拝見しています。この非常に「モダン」な UX 機能に向けて、どれほど多くの思索と努力が注がれているか、大変感銘を受けております。話題から少しそれてしまい申し訳ありませんが、長年他のフォーラムソフトウェアを利用してきた者にとって、これほど素晴らしい議論を目にすることはめったにありません。
素晴らしい取り組みを続けてください。この機能、大好きです。
「いいね！」 11
もしかしたら、最初のクリックで読み込み中だったのに、間違えてクリックしたと思い込んで同じトピックをもう一度クリックしてしまったのかもしれません。でも、たぶんローディングスピナーがないことに慣れる必要があるだけでしょうね…
「いいね！」 5