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

カスタマイズ テーマコンポーネント
52

良さそうです！

このメニューのリンク（ドロップダウン以外の部分）をクリックしても、スピナーが表示されたままです：

image
image1610×134 17.4 KB

「いいね！」 1
53

現在は 2px に設定されていますが、Retina MacBook のようなスケーリングを適用した HiDPI ディスプレイを使用している場合、画面では 1px 程度に見える可能性があります。本日、3px に引き上げます。

おっしゃる通り、現時点では UX として一貫性に欠ける部分があります。技術的には難しい問題です。現在、読み込みスライダーは Ember ルーターにフックされているため、Ember のルート遷移時のみ表示されます。UI 内の一部の「読み込み」状態は、実際には Ember のルート遷移ではないためです。この問題をどうすればより一貫性のあるものにしられるか、検討する必要があります。

「いいね！」 9
54

高 DPI 対応を心から楽しみにしています。サイト管理者に、ローディングスライダーと、刷新されたスピニングサークル（※咳咳：wink:※）のどちらかを選べるようにするのはどうでしょうか？

「いいね！」 1
55

現在は3pxに引き上げられたため、少し目立つようになります。

管理者はテーマコンポーネントを通じてすべてをカスタマイズできるため、サイトが読み込みスピンナーを維持したい場合は、それが可能になります :slight_smile:

「いいね！」 12
56

@meghna さんが Custom Loading Spinner Component を公開しました。これは、あらゆる DPI レベルで機能する FontAwesome の SVG アイコンを活用する素晴らしい方法です。

「いいね！」 7
57

これには大いに賛成で、@codinghorror のご指摘通り、デフォルトでコア機能として組み込むべきだと考えます。

「いいね！」 20
58

この問題は解決したと思います。すべてのトピック一覧ビューから読み込み中のスピナーが消失するはずです。

「いいね！」 9
60

iPadでは、読み込みスライダーが一切表示されません。（iPad第5世代…と思います。iOS 14、DiscourseHubアプリ）

image

上記のGIFをご覧ください。

「いいね！」 5
62

見つけてくれてありがとう、@CaptainZac。調整を行いましたので、iPad の PWA/DiscourseHub ビューでは現在正常に動作するはずです。

また、iPhone の DiscourseHub に必要な 1px の top 値も追加しました。これでアプリ内では 3px のフル高さが表示され、DiscourseHub 自身のスライダーと適切に整合しているようです。

「いいね！」 7
63

とても気に入りました :+1: 素晴らしい仕事ですね！ :slightly_smiling_face:

「いいね！」 2
64

ロゴをクリックした際、ホームページのローディングスライダーではなく、スピナーローダーがアクティブにならないようです。

「いいね！」 4
65

完璧です、早速ご利用ください！ありがとうございます！

「いいね！」 2
66

現在、解決いたしました。ありがとうございます！

「いいね！」 7
67

スライダーの問題点は、実際にはページが速く読み込まれても、動作が遅く感じられることがあることです。

その理由は、ページ全体の表示が完了するまで何も変化しないからです。これに対し、ローディングスピナー版では、クリック直後にページが真っ白になります。つまり、何か重要な変化が即座に起こるのか、それとも遅れて起こるのかという違いです。

「いいね！」 6
68

はい、その通りです。社内でも同様に議論していました。古いコンテンツを画面に残し続けることは、リンクをクリックした後の即時フィードバックがないことを意味します。私はページコンテンツを読み込み中に（部分的に）フェードアウトさせる変更を刚刚プッシュしました（cc @awesomerobot）。

当初は完全にフェードアウトさせる予定でしたが、そうすると真っ白な画面になってしまうだけでした。20%の不透明度に留めるのが良い中間点ではないかと考えています。十分なフィードバックがありつつ、不自然すぎない感じでしょうか：thinking:

現状では #main-outlet 全体をフェードアウトさせています。残念ながら、実際に読み込まれているルートの {{outlet}} をターゲットにする方法は思いつきません……もし私の考えが間違っているなら、それを証明していただければ幸いです。唯一の解決策は、コード内のすべての {{outlet}} をカスタムラッパーコンポーネントに置き換えることになるかもしれません。

「いいね！」 18
69

ますます良くなっていますね… :sunglasses:

「いいね！」 7
70

次のレベルのプレイ：リクエストの平均所要時間を記録し、フェードアニメーションも同じ時間がかかるようにする :rofl:

「いいね！」 14
71

素晴らしい。ずっと良くなったみたいですね。:100::+1:

「いいね！」 3
72

David の方がマシですが、それでも「遅い」という印象は残ります。正直、スピンナーほど明確な差がない限り、その状況は変わらないかもしれません。また、これはスライダー自体の特性によるものかもしれません。特に、スライダーが常に完了する場合です。なぜなら、スライダーが完了する前にページは読み込み済み（または読み込み完了したように見える）になるからです。しかし、ページ自体ではなく、非常に目立つスライダーがページの読み込みの指標となってしまうのです。

「いいね！」 6
74

https://meta.discourse.org/u/golaxo/summary
プロフィールページから Discourse のロゴをクリックすると、上部が消失してしまい、見た目が不自然になります。

「いいね！」 3