Слайдер горизонтальной загрузки

Кстати, я недавно вспомнил, что в XenForo всегда был индикатор загрузки. Приятно видеть, что теперь и в Discourse есть что-то подобное. :slight_smile:

Меня интересует, что будет более раздражающим при плохом соединении.

Отлично! :heart_eyes:

1 лайк

При желании вы можете симулировать плохие условия сети, используя консоль F12 в Chrome.

4 лайка

Обновление для iPhone 6s:

Теперь выглядит очень хорошо с тёмной темой и многими другими темами на мобильных устройствах.

Отличная работа!

Обновление для настольных ПК:

Ползунок загрузки по-прежнему едва виден в Chromium на мониторах ROG 27" и 34".

Можно ли добавить опцию темы для включения/отключения в зависимости от мобильного или настольного устройства?

1 лайк

Хочу сказать то же самое :smiley: Отличный вариант.

1 лайк

Я могу воспроизвести это при использовании входа через Facebook. Похоже, это вызывает параметр URL #_=_.

4 лайка

Я обнаружил, что отключение плагина discourse-topic-list-previews решает все проблемы со слайдером загрузки. Как только я снова включаю его, проблема возвращается.

Мы не используем сторонние системы входа, поэтому, похоже, это отдельная ошибка (или всё же как-то связана?).

Редактирование: На самом деле, когда оба плагина включены, страница остаётся размытой только на темах, где discourse-topic-list-previews нашёл изображение для замены изображения по умолчанию… и на странице категорий.

2 лайка

Продолжая тестирование на мобильных устройствах и настольных компьютерах с множеством тем, похоже, что такое решение даёт отличный результат для этого потрясающего слайдера:

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

Увеличение на один пиксель (с 3px до 4px) для значения по умолчанию отлично смотрится на мобильных устройствах; на больших экранах настольных компьютеров значение свыше 5px выглядит приятно, но пока я остановился на 7px :slight_smile:

Буду продолжать работу над этим, как только появится время, тестируя с различными темами на «больших» настольных компьютерах и на моих iPhone.

1 лайк

Можно вернуться к первой части этого сообщения? Попробовав это на компьютере, я обнаружил, что плавное исчезновение раздражает больше, чем ползунок. Думаю, это потому, что когда я кликаю по ссылке на страницу B, я ожидаю, что страница A либо исчезнет сразу (как раньше делал Discourse), либо останется на месте до появления B (как на обычных веб-страницах).

3 лайка

Привет, вы можете использовать это для отключения прозрачности. Создайте новый компонент в админке и добавьте это в раздел «Общее». :slight_smile:

body.loading #main-outlet {
  opacity: 1 !important;
}
5 лайков

Но в таком случае, в чём смысл этого по сравнению со спиннером? Просто чтобы увидеть полосу загрузки?

2 лайка

Это просто отключает эффект затухания. Это была первая версия. Только верхний слайдер без эффекта затухания.

2 лайка

В какой-то мере…

Первый вариант вообще не давал никакого эффекта: после клика по ссылке, кроме ползунка, вы не получали никакой визуальной обратной связи. Это было не совсем удобно.

Я пока не определился, что лучше: непрозрачная страница или пустая страница при клике. Согласен, что это может немного отвлекать. Возможно, лучше сделать плавное исчезновение до полной прозрачности при клике… пока не уверен.

6 лайков

Да, я тоже так думаю… Это действительно сложно… Возможно, настраиваемые эффекты подошли бы всем. :slightly_smiling_face:

Лично мне очень нравится эффект плавного затухания. :slight_smile:

Единственная проблема с непрозрачностью 0 заключается в том, что на данный момент это влияет только на main-outlet. header и below-site-header всё ещё видны.

1 лайк

Полагаю, я пытаюсь выразить свою личную боль, связанную с эффектом затухания (по крайней мере, на настольных компьютерах) @awesomerobot / @david

Мне очень-очень трудно читать текст с эффектом затухания, поэтому при каждом переходе мой мозг вынужден на долю секунды читать полупрозрачный текст, и это немного утомляет.

Возможно, было бы лучше, если бы текст исчезал полностью, но я не уверен. Часть проблемы также в том, что я нахожусь на расстоянии 250 мс, поэтому минимум 300 мс я буду ждать, что гарантирует, что некоторое время я буду смотреть на полупрозрачные буквы.

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 лайк