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

Настройка Компонент темы
1

:police_car_light: Эта функция теперь входит в ядро Discourse. Чтобы включить её, используйте настройку «Индикатор загрузки страницы». Подробнее ниже.

Этот компонент темы заменяет стандартный индикатор загрузки ядра Discourse на полосу загрузки в верхней части экрана. Такой подход широко используется на других сайтах (например, GitHub). Преимущество заключается в уменьшении «мигания» контента при переходе между страницами. Потенциальный недостаток — Discourse начинает восприниматься больше как веб-страница, чем как приложение.

Обычно С компонентом темы
ezgif-6-370e14693a43 ezgif-6-f4ed194f762c

Известные проблемы:

  • Выпадающее меню «Последние / Топ / Непрочитанные…» зависает на мобильных устройствах :white_check_mark:

  • Несовместимость с discourse-encrypt (например, заголовки тем могут «зависать» при переключении между темами)
:eyeglasses: Предпросмотр Создатель тем
:hammer_and_wrench: Репозиторий https://github.com/davidtaylorhq/discourse-loading-slider
:question: Руководство по установке Как установить тему или компонент темы
:open_book: Новичок в темах Discourse? Начинающее руководство по использованию тем Discourse
92 лайка
Discourse Loading Time
Discourse Version 3.0
Navigation toggle persists on mobile after selection is tapped
Updating the top menu immediately without showing spinner loading for whole page
Docs keeps previous page position
Sublime Theme
2

Для меня это выглядит гораздо приятнее. Индикатор загрузки хорош, но немного режет глаз.

25 лайков
3

Можем ли мы попробовать это в течение дня-двух на Meta, @david?

16 лайков
4

Конечно, давайте посмотрим, как это работает. Включено здесь, на Meta :+1: (И временно закрепил/переименовал эту тему, чтобы люди знали, что это происходит)

25 лайков
6

Хотя мне это нравится, это ощущается довольно медленнее. Возможно, это из-за задержки около 250 мс от Meta.

14 лайков
7

Да, я в замешательстве. Мне нравится, что это устраняет мерцание всей страницы, но из-за этого интерфейс кажется чуть менее отзывчивым :thinking:

15 лайков
8

Напротив, мне кажется, что при подключении с низкой задержкой страница ощущается быстрее. Хотя отзывчивость интерфейса при этом отличается.

13 лайков
9

Мне больше нравился индикатор загрузки, хотя, честно говоря, я даже не замечал его. Мне нравится, что он появляется на долю секунды, а затем страница мгновенно открывается. Это кажется быстрым. С полосой загрузки я больше осознаю ожидание. Я ловил себя на том, что всё ещё смотрю на неё, хотя в это время уже мог бы начать читать страницу.

Возможно, было бы лучше, если бы он «заканчивался» на более раннем этапе загрузки страницы.

Или, если вы хотите отказаться от старого индикатора, как насчёт нового, похожего на круговую версию полосы — достигающего 360 градусов как раз перед исчезновением?

10 лайков
11

Это выявило несколько различных ошибок рендеринга (например, прямой переход из одной темы в другую вызывал проблемы с отображением первого сообщения). Временно удалено из раздела «Мета», но вы всё ещё можете протестировать это, используя ссылку на создатель тем в первом сообщении.

14 лайков
13

О да, это на 100% лучше, не стесняйтесь сделать так!

17 лайков
16

Проблема с отображением тем теперь устранена, поэтому я снова включил это здесь, на Meta. Посмотрим, как всё пойдёт.

17 лайков
17

Выглядит отлично. :+1:t2: Продолжайте в том же духе.

9 лайков
18

Бар намного лучше.

6 лайков
19

Мне это очень нравится, даже если кастомные спиннеры в большинстве случаев не отображаются.
Однако есть одна проблема. Полоса загрузки не используется при перезагрузке текущей темы или списка тем.
Если вы находитесь на главной странице Meta, нажмите на логотип, и вы увидите спиннер вместо полосы.

8 лайков
20

Мне это нравится гораздо больше, чем спиннер. Отличная работа!

Как установить или изменить цвет полосы загрузки?

6 лайков
21

В настоящее время она определяется цветом «quaternary» в цветовой схеме. Если нужно, её можно легко настроить индивидуально через CSS.

Хорошо подмечено, спасибо. Попробую также переопределить эту ситуацию :+1:

12 лайков
22

Цель состоит в том, чтобы в конечном итоге перенести это в ядро Discourse и не требовать использования компонента темы?

7 лайков