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

@david 新しいページが読み込まれていて古いコンテンツが表示されている間に、すべてのクリックを無効にしましょうか?エッジケースのようですが、妥当な案だと思います。

@awesomerobot デスクトップのスライダーの太さについて、あなたは満足していますか?私の部署では意見が分かれていますが、数日間はこれで様子を見るつもりです。モバイルでは、バランスが適切だと感じています。

「いいね!」 7

目指すところによると思います。主な目標の一つが「インターネットの他の部分と(ほぼ)同じように動作する」ことであるなら、これを避けたほうがいいかもしれません。「一般的な」ウェブサイトでは、最初のリンクをクリックした直後に非常に素早く 2 番目のリンクをクリックすると、2 番目のリンクのコンテンツが読み込まれます。

「いいね!」 8

この変更は特にその後の調整と合わせてとても気に入っています。さらに多くのフィードバックを得るために、ベータ版でリリースされるのを心待ちにしています。

いつこれをコアに組み込めますか、@david さん?

「いいね!」 9

そうですね、おっしゃる通りかもしれません… 現状の仕様をそのままコアに組み込むことを支持します。

今後の展開の中で徐々に洗練させていくこともできますが、現在の状態はすでにかなり完成されており、非常にうまく機能しています。

「いいね!」 8

現在の太さで問題ないと思います。もし「目立たない」という不満が出たら、その時点で1px増やしましょう。コアに実装されるのを楽しみにしています!

「いいね!」 7

素晴らしいですね!まだいくつかのレンダリングのバグを修正する必要があります(例:こちら)。それらが修正されれば、コア機能に追加することも可能でしょう。ただし、個人的には Meta でもう少し長くテストしたいと考えています。現在の実装はたった 24 時間しか稼働していません。

いくつかの人気の PWA を確認しました:

サービス 即時ページ全体変更 スライダー スピナー カスタムプレースホルダー
Facebook :white_check_mark: :white_check_mark:
Twitter :white_check_mark: :white_check_mark:
LinkedIn (一部ページのみ) :white_check_mark:
YouTube :x: :white_check_mark:
GitHub :x: :white_check_mark:
:discourse: 旧 Discourse :white_check_mark: :white_check_mark:
:discourse: スライダー付き Discourse :x: :white_check_mark:

この変更により、私たちは YouTube や GitHub に近づきます。私個人の見解では、それらはアプリというよりウェブサイトのように感じられます。私たちが目指すべき方向でしょうか?:thinking:

「いいね!」 15

私はそう思います。それは「ミニマル/Web 風のデフォルトテーマ」という哲学と合致します。もし実験的なアプローチを試したい場合は、スピナーやカスタムプレースホルダー用のテーマコンポーネントを後から提供することも可能です。

この変更により、画面上で変化するピクセル数が減る点も気に入っています。

Gmail も同様のパターンを採用しています(まず四角形で読み込みを表示し、その後コンテンツに切り替える方式です)。

「いいね!」 8

現在のスライダーの設定は以下の通りです。これは好みの問題ですが、モバイルでは 3px より 4px の方が好みだと感じます(もちろん 3px でも問題ありません)。一方、大きなデスクトップ画面では、主観的に 6px の方が良く見えますが、私は個人的に 7px が好きです。これは、ページが読み込まれた際に、すべてのテーマ背景色に対してスライダーと進行状況がはっきり見えるようにしたいと考えているからです。ただし、大きなデスクトップ画面で 6px に減らしても全く問題ありません。大きなデスクトップ画面(27 インチや 34 インチのモニターなど)では、6px 未満だと一部の背景テーマ色に対してほとんど目立たなくなります。スライダーは「読み込み中」を示すものなので、私の意見では「目立つ側」に余裕を持たせる方が良いでしょう。もちろん、これも非常に主観的な問題です。

height: 4px;
 
@media only screen and (min-width: 960px) {
        height: 7px;
  }
「いいね!」 8

この機能に関する私の(遅れた)フィードバックです:

このトピックを訪れる前、私はその変更さえ気づいていませんでした。これは…良いことです!私の考えでは、良い機能とは現在の体験に自然に溶け込むものです。

この機能に少し注意を払った後、以前の動作よりも画面のちらつきが少ない方が視覚的に魅力的であることに同意できます。

この変更に対して、チームが注いだ慎重なデザインと配慮に祝いを贈ります! :slight_smile:

「いいね!」 13

こんにちは、

このコンポーネントが大好きですが、バグを見つけました(自分のテーマとの競合かと思ったのですが、こちらでも確認できました)。.navigation-toogle 要素をクリックすると、ドロップダウンが開いたままになります:

「いいね!」 6

もしかすると、私の報告が混雑の中で見失われたのかもしれません(あるいは、まだ確認する時間が取れていないだけかもしれません)。

「いいね!」 3

@cosdesign さん、@seanblue さん、ありがとうございます。修正の件は引き続き注視しています。こちらのスレッドの最初の投稿に「既知の課題」のリストを作成しましたので、未解決の課題を把握できるよう共有します。

「いいね!」 10

そのドロップダウンの問題は現在解決されています:

「いいね!」 8

このコンポーネントが本当に気に入っています。自分の Discourse フォーラムにもインストールしました。ありがとうございます!

一つ提案があります。ページ読み込み中にスケルトン画面を表示することは可能でしょうか?ページの読み込みに少し時間がかかる場合、クリックが認識されたことを示すのに役立ちます。これは私が気づいた小さな詳細ですが、最初は読み込みバーが見えなかったため、トピックのタイトルを二度クリックしてしまうことがありました。一方、スピナーは即座に表示されました。

「いいね!」 4

これは私たちが採用した妥協案で、画面の表示を2秒経過し、かつ表示するコンテンツがない場合を除き、変更しないようにしています。

この2秒を1秒に短縮する切り替え機能を追加することも可能ですが、現在のバランスが最適だと考えています。

「いいね!」 7

数日間離れて戻ってきましたが、最初に気づいたのは、ここが以前に比べてかなり遅く感じられることです。

Google グループが似たような機能を取り入れたことは承知していますが、彼らの動きを真似る必要はないと思います。スピナーの方が Discourse にずっと合っていたと思います。レスポンスが良く、Ruby アプリは常に遅いという神話さえ払拭してくれたほどです。私はそれが大好きで、Discourse が非常に高速に見えるのも気に入っていました。残念ながら、このスライダーは大きな後退だと感じています(この機能に取り組んだ皆さんに謝罪します。おそらく聞きたくない話だとはわかっていますが、Discourse のためになることを皆が望んでいると考えていますので、私の気持ちを共有しても構わないでしょう)。

「いいね!」 2

コアにリリースする際、従来の遷移モードを可能にするコンポーネントを提供します。

皆様からのフィードバックは受け止めていますが、極めて少数派の意見です。大多数のユーザーは新しい遷移スタイルを好んでいます。新しいスタイルでは、画面の変化が少なくなります。

旧方式

クリック → 白画面 → コンテンツ

新方式

クリック → コンテンツ

白い画面にローダーを表示するのを好む方もいらっしゃることは理解しています。しかし、これは少数派の意見です。

「いいね!」 11

サムさん、白画面が好きかどうかって話じゃなくて、速度感の問題なんですよ。

実は私は以前から、Discourse の速度(そして操作感)が最も印象的な機能の一つだと思っていました。Ruby にかなり反対していた人たちでさえ、あなたが Discourse で成し遂げたことには感銘を受けたと聞いています。

また、その速度感は現在、これまで以上に重要だと考えます。なぜなら、私たちは常に Twitter や Discord といった巨大なサイトと競合しているからです。たとえ無意識レベルだとしても、わずかなもたつきが影響を及ぼす可能性があると思います。


古い遷移モード用のコンポーネントが用意されるのは素晴らしいことですが、懸念点があります。それがオーバーヘッドを追加し、速度低下(たとえ小さくても)を招き、結果として従来の方法やスピナーの利点を無効にしてしまうのではないかということです。もしそうならないのであれば、それで構いません。しかし、この変更は、他の Discourse サイト全体にとってマイナスになるだろうと私はまだ考えています。

「いいね!」 4

速度に関する認識には完全に賛成です。

スピンナーが画面に長い間表示され続けるなら、それは問題を示しています(ただし、スピンナー自体が問題というわけではありません)。その場合、スライダーの方がむしろ有益かもしれません。

スライダーは、裏側で処理が遅れていることを示唆します。昔の Windows のプログレスバー(残り時間:6 日 23 時間)を思い出させます。スライダーが表示されると、速度に問題があるに違いないと感じ、それは私のイライラを和らげるために存在しているように思えます。このスライダーは毎回 80% 付近で少し止まるような気がするため、何か問題が起きたのだと思い込んでしまいます。

フォーラムが高速であるなら、スライダーは適切な選択肢ではありません。

「いいね!」 4

Metaを使うほど、以前のスピナーの方が好みだと感じるようになりました。スライダーでは変化がわかりにくく、Webサイトが反応しないような印象を受けてしまいます。

「いいね!」 2