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

@david, возможно, стоит отключить все клики во время загрузки новой страницы, пока мы показываем старое содержимое? Похоже на крайний случай, но разумный.

@awesomerobot, тебя устраивает толщина слайдера на десктопе? В моём отделе пока нет единого мнения, поэтому решим оставить как есть на несколько дней. На мобильном, на мой взгляд, баланс подобран верно.

7 лайков

Думаю, это зависит от того, к чему вы стремитесь. Если одна из ваших главных целей — «работать (почти) так же, как остальной интернет», то, возможно, этого делать не стоит. На «обычных» сайтах, если я очень быстро кликаю по второй ссылке сразу после первой, контент второй ссылки загружается.

8 лайков

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

Когда мы сможем включить это в ядро, @david?

9 лайков

Да, думаю, ты прав… Похоже, я поддерживаю идею включить это в ядро именно в том виде, в котором оно есть сейчас.

Мы всегда можем доработать это по ходу дела, но то, что у нас есть сейчас, уже довольно проработано и работает отлично.

8 лайков

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

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

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

Мне очень нравится, что это изменение уменьшает количество пикселей, которые меняются на экране.

Кажется, Gmail тоже использует похожий паттерн (он сначала отображает загрузку в виде квадрата, а затем подменяет контент).

8 лайков

У нас ползунок настроен следующим образом (ниже). Это вопрос вкуса, но я считаю, что 4 пикселя на мобильных устройствах выглядят лучше, чем 3 пикселя; хотя 3 пикселя тоже вполне допустимы. Однако на больших экранах десктопов, субъективно говоря, лучше смотрится 6 пикселей; но лично мне нравится 7 пикселей, потому что я хочу, чтобы люди видели ползунок и относительный прогресс при загрузке страницы на фоне любых цветов темы; но если мы уменьшим это до 6 пикселей на больших экранах десктопов, это тоже вполне приемлемо. Меньше 6 пикселей на больших экранах десктопов делает его едва заметным на мониторах 27 и 34 дюйма (на фоне некоторых цветов темы); и поскольку ползунок указывает «загрузка», я считаю, что лучше перестраховаться в сторону большей заметности; но, конечно, это очень субъективно.

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 Groups внедрил что-то подобное, но не думаю, что нам нужно копировать их решение. Спиннер гораздо лучше подходил для Discourse, на мой взгляд: он был отзывчивым и даже помог развеять миф о том, что Ruby-приложения всегда медленные. Мне это нравилось, и мне нравилось, насколько быстрым казался Discourse. К сожалению, я считаю, что этот слайдер — большой шаг назад (извините перед всеми, кто работал над этим; я знаю, что, возможно, вы не хотели этого слышать, но, думаю, мы все хотим лучшего для Discourse, поэтому надеюсь, вы не против, что я делюсь своими ощущениями по этому поводу).

2 лайка

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

Мы услышали ваши отзывы, но вы представляете крайне малую часть пользователей; большинство предпочитает новый стиль перехода. Новый стиль означает, что на экране меняется меньше элементов.

Старый

Нажатие → белый экран → контент

Новый

Нажатие → контент

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

11 лайков

Дело не в том, нравится вам белый экран или нет, Сэм, а в ощущении скорости.

Я всегда считал, что скорость (и общее ощущение) Discourse — одна из его самых впечатляющих особенностей, и знаю, что даже те, кто был решительно против Ruby, были поражены тем, что вы сделали с Discourse.

Я также считаю, что ощущение скорости сейчас важнее, чем когда-либо, потому что мы постоянно конкурируем с гигантами вроде Twitter и Discord, и даже легкое ощущение медлительности может повлиять на восприятие — даже если это происходит на подсознательном уровне.


Отлично, что будет компонент для старого режима переходов, но я опасаюсь, что это может добавить накладные расходы и привести к замедлению (даже если оно небольшое), тем самым нивелируя преимущества старого способа/спиннера. Если этого не произойдет, я буду доволен… но я всё ещё считаю, что этот шаг негативно скажется на всех остальных сайтах Discourse.

4 лайка

Я полностью согласен с восприятием скорости.

Если индикатор загрузки будет оставаться на экране слишком долго, это укажет на проблему (хотя сам индикатор не является проблемой), и, возможно, будет менее информативным, чем ползунок.

Ползунки указывают на внутреннюю медлительность. Они напоминают мне старые полосы прогресса в Windows («оставшееся время: 6 дней 23 часа»). Когда я вижу их, я думаю, что обязательно что-то не так со скоростью, и они служат лишь для того, чтобы уменьшить мое нетерпение. Этот ползунок всегда как будто немного замирает примерно на 80%, из-за чего каждый раз кажется, что что-то пошло не так.

Если форум работает быстро, то использование ползунка — не лучшая идея.

4 лайка

Чем больше я использую Meta, тем больше понимаю, что предпочитаю старый индикатор загрузки. Ползунок просто недостаточно заметен, из-за чего сайт кажется неотзывчивым.

2 лайка