Выглядит отлично, Дэвид! Одно предложение — можно ли сделать так, чтобы полоска продолжала двигаться (возможно, в более медленном темпе), вместо того чтобы останавливаться примерно посередине, даже если она ожидает ответа? Например, она могла бы двигаться медленнее от 40% до 70%, а затем останавливаться, если ответа нет?
Скрытие этой короткой паузы, на мой взгляд, сделало бы процесс более отзывчивым и мгновенным 
В настоящее время, похоже, оно движется медленнее в течение 5 секунд перед остановкой на 80% ширины.
Здесь я смоделировал очень, очень медленное интернет-соединение:
Текущий SCSS:
.loading-indicator-container {
--loading-duration: 5s;
--loading-function: cubic-bezier(0, 0, 0, 1);
--done-duration: 0.4s;
--done-function: ease;
--fade-out-duration: 0.4s;
position: fixed;
top: 0;
left: 0;
z-index: 1001;
height: 3px;
width: 100%;
opacity: 0;
transition: opacity var(--fade-out-duration) ease var(--done-duration);
background-color: var(--primary-low);
}
.loading-indicator-container .loading-indicator {
height: 100%;
width: 100%;
width: 0%;
background-color: var(--tertiary);
}
.loading-indicator-container.loading {
opacity: 1;
transition: opacity 0s;
}
.loading-indicator-container.loading .loading-indicator {
transition: width var(--loading-duration) var(--loading-function);
width: 80%;
}
.loading-indicator-container.done .loading-indicator {
transition: width var(--done-duration) var(--done-function);
width: 100%;
}
body.discourse-hub-webview .loading-indicator-container {
top: 1px;
}
body.footer-nav-ipad .loading-indicator-container {
top: 49px;
}
body.loading #main-outlet {
opacity: 0.2;
transition: opacity 0.2s ease;
}
Хм, у меня оно застревает примерно на 40%, но, я думаю, движущаяся полоса — даже если медленнее — была бы лучше, чем пауза.
Кроме того, касательно затухания: возможно, плавное исчезновение старого контента и появление нового сделало бы процесс более быстрым (если можно обратиться к outlet для маршрута загрузки)?
Происходит две вещи…
@Canapin прав: начальная анимация завершается через 5 секунд на отметке 80%… поэтому при медленном соединении она застревает на этом месте и не завершится, пока вы не перейдёте на следующую страницу.
Случай @P16 — это то, что я наблюдаю на быстром соединении… как только происходит переход со текущей страницы, анимация на мгновение останавливается в том месте, где она находилась… и через секунду возобновляется на новой странице (здесь я преувеличил высоту полосы, чтобы её было лучше видно).
Я согласен, что идеальным вариантом было бы сохранить непрерывное движение, но это может быть невозможно без полной переделки реализации…
Я не думаю, что плавное появление сильно поможет… вы не сможете показать контент, пока он не загрузится, так что таким образом вы лишь немного задержите его появление. Возможно, это создаст иллюзию скорости, но технически это будет медленнее ровно на столько, сколько длится анимация появления!
Только что понял, что можно (отчасти) протестировать эффект плавного появления с помощью компонента оглавления (поскольку он плавно показывает пост). Например, посетите: PostgreSQL 13 update. Мне не кажется, что это ощущается как более быстрый вариант… но это определённо выглядит «мягче».
Ооо, я думаю, это происходит потому, что контент был загружен, и произошёл значительный сбой на этапах парсинга HTML, каскадирования стилей, раскладки и рендеринга, в течение которого анимация не могла двигаться.
.loading-indicator-container .loading-indicator, .loading-indicator-container {
background-color:#FFCC00;
}
Я попытался изменить цвет в CSS темы, но он остаётся синим. Кто-нибудь может помочь?
Да, точно. Однопоточная природа рендеринга JS/DOM означает, что мы теряем множество кадров при отрисовке темы 
. Слайдер «движется» всё это время, просто кадры никогда не отрисовываются.
Спасибо. Я только что исправил это в ядре, так что здесь, на Meta, это исправится очень скоро.
Я сегодня включу плавное появление на Meta, чтобы мы могли оценить, как это ощущается. Хотя, очевидно, если мы это сделаем, нам нужно будет убрать другие плавные появления, например, компонент оглавления.
Редактирование: сделано. Плавное появление включено на Meta.
В зависимости от порядка загрузки ваших тем/компонентов это может не сработать. Вам нужно сделать селектор «более специфичным», чем CSS компонента индикатора загрузки. Простейший вариант — добавить !important к background-color. Также вам нужно убрать селектор контейнера, иначе фон будет таким же, как передний план:
.loading-indicator-container .loading-indicator {
background-color:#FFCC00 !important;
}
Спасибо, Дэвид, выглядит отлично!
Теперь берётся среднее значение за последние 5 загрузок страницы, и на его основе устанавливается скорость полосы.
Привет, Дэвид,
Этот загрузчик становится всё лучше и лучше Продолжай в том же духе.
С этим новым обновлением всё выглядит более динамично
Я только что заметил одну вещь в разделе категорий. Я использую кнопку «Создать тему» для переименования. 
При использовании Loading Slider текст кнопки не обновляется. Я заметил это, так как это может вызвать проблемы с другими скриптами.
Демо (в этом видео я нажимаю на категорию, у которой есть свой текст кнопки «Создать тему», а затем перехожу в другую категорию с кнопкой по умолчанию.) После перезагрузки всей страницы отображается правильный текст.
Плавное появление/исчезновение — это улучшение. Но ползунок всё ещё отвлекает. Я ловлю себя на том, что смотрю на него, из-за чего мне требуется больше времени, чтобы быть готовым читать страницу после её загрузки. С индикатором загрузки всё было проще: он был в одном месте, поэтому легко не обращать на него внимания, а его внезапное появление ассоциируется у меня со скоростью (возможно, ошибочно).
Возможно, на медленных соединениях ползунок предпочтительнее, так как он даёт представление о том, насколько быстро или медленно загружается страница. Насколько это верно — не знаю.
Для меня при использовании мобильного телефона ползунок расположен в верхней части экрана, тогда как в старой версии он находится ближе к середине экрана, примерно на 30% от верха…
Вместо того чтобы держать взгляд в центре экрана, глаза вынуждены двигаться вверх-вниз, вверх-вниз… просто моё личное мнение…
Я согласен с этим. Думаю, было бы лучше, если бы Loading Slider работал только на настольных компьютерах, а на мобильных устройствах, возможно, оставить спиннер. Спиннер больше напоминает использование приложения, что хорошо для мобильных устройств. Так же, как YouTube использует загрузчики.
Да, я использовал его на iPhone, поэтому мои комментарии касались именно мобильной версии.
Отличная концепция. Я большой поклонник слайдеров по сравнению со спиннерами.
Включил и протестировал на множестве тем (Dark, Alien, Vincent, Star Wars и др.) на мониторах ROG 27" и 34". Слайдер загрузки еле видно — он кажется очень тонким. В тёмных темах тонкая линия имеет слишком мягкий цвет, чтобы её было хорошо заметно.
Также попробовал слайдер на мобильных устройствах: iPhone 6s и iPhone 6+. Аналогичные замечания — еле заметно.
Не хочу быть пессимистом, но объективно говоря, слайдер выглядит многообещающе, но требует дополнительной работы с CSS (на мой взгляд). Поэтому пока мы вернулись к спиннеру на нашем сайте, так как он заметен и чётко передаёт смысл «перезагрузки». Когда у меня будет время, я снова включу слайдер и доработаю CSS для нашего сайта, поскольку он действительно выглядит перспективно!
Выглядит очень многообещающе!
Спасибо и продолжайте в том же духе!
P.S. Проблем со скоростью нет. Я подключён (почти напрямую) к национальной оптоволоконной магистрали через выделенное оптоволокно до основной магистрали.
Хочу отметить, что мне не очень нравится новое поведение UX при выборе категорий, тем и т.д., когда текущий вид затухает перед загрузкой новой страницы. Мне кажется, что старый подход с пустой страницей и индикатором загрузки был гораздо приятнее.
В любом случае страница меняется дважды. Но поскольку индикаторы загрузки — это универсальный элемент, это не создавало ощущения, что страница меняется дважды. Казалось, что она готовится к изменению, а затем меняется один раз. Теперь же кажется, что она меняется дважды, потому что после обоих переходов остаётся контент: сначала затухший, затем — с новым содержимым страницы. Трудно точно сформулировать, почему мне это не нравится, но, думаю, дело в том, что больше нет универсального экрана загрузки. Теперь фактически существует бесконечное множество разных экранов загрузки, и мне кажется, что эффект затухания перед загрузкой отвлекает, поскольку фоновый контент каждый раз при переходе на новую страницу разный.
Да, некоторые вещи, использующие хуки didInsertElement, потребуют обновления. Со старым спиннером все элементы на странице уничтожались и создавались заново. В новой системе Ember будет переиспользовать элементы, если это возможно. Это может даже немного ускорить рендеринг, но может создать некоторые баги, если кастомизации не следуют стандартным паттернам Ember. Нам придётся проработать и исправить их по мере обнаружения.
Есть ли у вас код ваших кастомизаций в git-репозитории, которым вы могли бы поделиться?
Это основная причина, по которой я хочу поэкспериментировать с этим как с компонентом темы ещё немного — мы сможем выявить как можно больше проблем до того, как внедрим его в ядро.
Конечно, вот репозиторий. Спасибо
Кажется, в этой новой функции есть баг на мобильных устройствах (по крайней мере на iPhone). Если выбрать «Последние» из выпадающего меню навигации, то при загрузке страницы меню корректно исчезает. Но если выбрать «Новые» или «Непрочитанные» (возможно, и другие пункты), меню остаётся видимым. Это происходит не всегда, но достаточно часто, чтобы проблему можно было легко воспроизвести. Обратите внимание, что в старой версии это иногда случалось, но только с пунктом «Последние» и никогда с «Новые» или «Непрочитанные».
Спасибо @Don — я попробовал это, и мне кажется, что это более подходящий способ, который должен работать с новым слайдером: https://github.com/VaperinaDEV/category-btn-name/pull/1 (извините, если я где-то ошибся в венгерском). Такой подход может быть полезен, если другим тоже нужно обновить свои компоненты (используя вычисляемые свойства вместо didInsertElement и JQuery).
добавил в свой список для проверки, спасибо