Кстати, я недавно вспомнил, что в XenForo всегда был индикатор загрузки. Приятно видеть, что теперь и в Discourse есть что-то подобное. ![]()
Меня интересует, что будет более раздражающим при плохом соединении.
Отлично! ![]()
При желании вы можете симулировать плохие условия сети, используя консоль F12 в Chrome.
Обновление для iPhone 6s:
Теперь выглядит очень хорошо с тёмной темой и многими другими темами на мобильных устройствах.
Отличная работа!
Обновление для настольных ПК:
Ползунок загрузки по-прежнему едва виден в Chromium на мониторах ROG 27" и 34".
Можно ли добавить опцию темы для включения/отключения в зависимости от мобильного или настольного устройства?
Я могу воспроизвести это при использовании входа через Facebook. Похоже, это вызывает параметр URL #_=_.
Я обнаружил, что отключение плагина discourse-topic-list-previews решает все проблемы со слайдером загрузки. Как только я снова включаю его, проблема возвращается.
Мы не используем сторонние системы входа, поэтому, похоже, это отдельная ошибка (или всё же как-то связана?).
Редактирование: На самом деле, когда оба плагина включены, страница остаётся размытой только на темах, где discourse-topic-list-previews нашёл изображение для замены изображения по умолчанию… и на странице категорий.
Продолжая тестирование на мобильных устройствах и настольных компьютерах с множеством тем, похоже, что такое решение даёт отличный результат для этого потрясающего слайдера:
height: 4px;
@media only screen and (min-width: 960px) {
height: 7px;
}
Увеличение на один пиксель (с 3px до 4px) для значения по умолчанию отлично смотрится на мобильных устройствах; на больших экранах настольных компьютеров значение свыше 5px выглядит приятно, но пока я остановился на 7px ![]()
Буду продолжать работу над этим, как только появится время, тестируя с различными темами на «больших» настольных компьютерах и на моих iPhone.
Можно вернуться к первой части этого сообщения? Попробовав это на компьютере, я обнаружил, что плавное исчезновение раздражает больше, чем ползунок. Думаю, это потому, что когда я кликаю по ссылке на страницу B, я ожидаю, что страница A либо исчезнет сразу (как раньше делал Discourse), либо останется на месте до появления B (как на обычных веб-страницах).
Привет, вы можете использовать это для отключения прозрачности. Создайте новый компонент в админке и добавьте это в раздел «Общее». ![]()
body.loading #main-outlet {
opacity: 1 !important;
}
Но в таком случае, в чём смысл этого по сравнению со спиннером? Просто чтобы увидеть полосу загрузки?
Это просто отключает эффект затухания. Это была первая версия. Только верхний слайдер без эффекта затухания.
В какой-то мере…
Первый вариант вообще не давал никакого эффекта: после клика по ссылке, кроме ползунка, вы не получали никакой визуальной обратной связи. Это было не совсем удобно.
Я пока не определился, что лучше: непрозрачная страница или пустая страница при клике. Согласен, что это может немного отвлекать. Возможно, лучше сделать плавное исчезновение до полной прозрачности при клике… пока не уверен.
Да, я тоже так думаю… Это действительно сложно… Возможно, настраиваемые эффекты подошли бы всем. ![]()
Лично мне очень нравится эффект плавного затухания. ![]()
Единственная проблема с непрозрачностью 0 заключается в том, что на данный момент это влияет только на main-outlet. header и below-site-header всё ещё видны.
Полагаю, я пытаюсь выразить свою личную боль, связанную с эффектом затухания (по крайней мере, на настольных компьютерах) @awesomerobot / @david
Мне очень-очень трудно читать текст с эффектом затухания, поэтому при каждом переходе мой мозг вынужден на долю секунды читать полупрозрачный текст, и это немного утомляет.
Возможно, было бы лучше, если бы текст исчезал полностью, но я не уверен. Часть проблемы также в том, что я нахожусь на расстоянии 250 мс, поэтому минимум 300 мс я буду ждать, что гарантирует, что некоторое время я буду смотреть на полупрозрачные буквы.
Кстати,
Я закомментировал переход тела (плавное появление текста) и считаю, что без него выглядит нормально (и, возможно, ощущается быстрее). Всё равно что одно и то же…
// body #main-outlet {
// transition: opacity 0.2s ease;
// }
// body.loading #main-outlet {
// opacity: 0.2;
// transition: opacity var(--loading-duration) ease;
// }
Спасибо, Дон, этого достаточно ![]()
Да, на мобильных устройствах я думал, что затухание улучшает отображение индикатора, но до внедрения эффекта затухания я не рассматривал его внимательно на десктопе. (На десктопе я находил эффект затухания раздражающим.)

