横型ローディングスライダー

余談ですが、XenForo は最初から読み込みスライダーを搭載していたことを最近思い出しました。Discourse も今や同様の機能を備えているのは嬉しいです。:slight_smile:

ネットワークが不安定な場合、どちらの方がよりイライラするのでしょうか。

素晴らしい!:heart_eyes:

「いいね!」 1

必要に応じて、Chrome の F12 コンソールを使用して、ネットワーク環境が悪い状況をシミュレートできます。

「いいね!」 4

iPhone 6s に関する更新情報:

ダークテーマおよびモバイル向けの多くの他のテーマで、現在非常に良好に動作しています。

お疲れ様でした!

デスクトップに関する更新情報:

Chromium で 27 インチおよび 34 インチの ROG モニターを使用している場合、ロードスライダーがまだほとんど見えません。

モバイルとデスクトップでテーマの有効/無効を切り替えるオプションを追加することは可能でしょうか?

「いいね!」 1

私も同じことを言いたいです :smiley: とても良い選択肢ですね。

「いいね!」 1

Facebook ログインを使用する場合、これを再現できます。この URL パラメータ #_=_ が原因のようです。

「いいね!」 4

discourse-topic-list-previews プラグインを無効にすることで、Loading slider に関するすべての問題が解決しました。再度有効にすると、問題が再発します。

サードパーティのログイン機能は使用していないため、これは別のバグか、何らかの形で関連している可能性があります。

追記:実際、両方のプラグインを有効にした場合、discourse-topic-list-previews がデフォルト画像を置き換える画像を検出するトピックページと、カテゴリページのみが霞んだ状態のままになります。

「いいね!」 2

モバイルとデスクトップで多数のテーマを用いたテストの結果、この素晴らしいスライダーには以下のような設定が良好な結果をもたらすことがわかりました。

  height: 4px;
  
  @media only screen and (min-width: 960px) {
        height: 7px;
  }

デフォルト値に 1 ピクセル(3px から 4px)加えるだけで、モバイル表示が非常に美しく見えます。また、より大きなデスクトップ画面では 5px を超える値も良い印象ですが、現時点では 7px に設定しました :slight_smile:

時間ができ次第、この点についてさらに調整を進め、「大画面」のデスクトップや私の iPhone で、さまざまなテーマを用いたテストを行っていきます。

「いいね!」 1

最初の部分について再考させてください。デスクトップで試したところ、フェードアウトの方がスライダーよりも煩わしく感じられます。リンクをクリックしてページBに移動した際、ページAが即座に消える(Discourse が以前行っていたように)か、B が表示されるまで残る(一般的な Web ページのように)かのどちらかを期待するためだと思います。

「いいね!」 3

こんにちは、透明度を無効にするにはこれを使用できます。管理画面で新しいコンポーネントを作成し、これを共通セクションに追加してください。:slight_smile:

body.loading #main-outlet {
  opacity: 1 !important;
}
「いいね!」 5

しかし、その時点で、スピナーに対してこの方法の利点は何でしょうか?単にローディングスライダーを表示するためだけですか?

「いいね!」 2

これはフェード効果を無効にするだけのものです。これは最初のバージョンでした。フェード効果なしのトップスライダーのみです。

「いいね!」 2

どちらとも言えません…

最初のバージョンでは、スライダー以外のリンクをクリックしても何も反応がなく、視覚的なフィードバックが得られませんでした。これは望ましくありませんでした。

クリック時に不透明なページを表示するか、空白のページを表示するかで、まだ迷っています。確かに少し気が散るかもしれません。クリック時にフェードアウト(透明度を0にする)方がよいかもしれませんね…まだ確信が持てません。

「いいね!」 6

はい、私もそう思いますね…本当に難しい問題です…誰でも設定変更できるエフェクトがあれば良いかもしれませんね。:slightly_smiling_face:

個人的には、このフェードエフェクト付きの状態がとても気に入っています。:slight_smile:

0 透明度にする唯一の問題は、現時点では main-outlet だけが影響を受ける点です。headerbelow-site-header はまだ表示されたままです。

「いいね!」 1

デスクトップ版のフェード表示に伴う個人的な不便さを言葉にするのは難しいですが、@awesomerobot さん / @david さんへのコメントです。

フェードしたテキストは非常に読みづらく、すべての遷移で脳が瞬間的にフェードしたテキストを読まざるを得なくなり、少し疲れてしまいます。

もし完全に消えるようにフェードすれば、もしかしたらマシになるかもしれません。問題の一部は、私の環境が250msの遅延にあることもあって、最低でも300msほど待たされるため、必ず何らかの時間、フェードした文字を見てしまうことになります。

「いいね!」 12

参考までに、

ボディのトランジション(フェードインするテキスト)をコメントアウトしましたが、トランジションがない方が見た目も問題ないし、もしかすると動作が速く感じられるかもしれません。どちらでも大差ないというところでしょうか…

// body #main-outlet {
//   transition: opacity 0.2s ease;
// }

// body.loading #main-outlet {
//   opacity: 0.2;
//   transition: opacity var(--loading-duration) ease;
// }
「いいね!」 2

ありがとうドン、それで完璧だ :grin:

「いいね!」 2

はい、モバイルではフェード効果がスライダーを良く見せると考えましたが、フェードが導入される前にデスクトップでしっかり確認していませんでした。(デスクトップではフェード効果が煩わしく感じました。)

モバイルデバイスでのみフェード効果を有効にするのはどうでしょうか?ローディングスライダーは Safari を強く思い出させます。:slight_smile:

「いいね!」 1