Я видел, как на других сайтах текущая страница остаётся полностью видимой, пока загружается другая, и при этом по экрану проходит индикатор загрузки. Возможно, стоит попробовать этот вариант.
8 лайков
Хочу добавить ещё один момент. Мне кажется, я заметил ещё одно существенное отличие Discourse от некоторых других сайтов, использующих индикатор загрузки. Три сайта, с которыми я сравниваю: https://www.youtube.com, https://github.com и https://bookmeter.com. Вот ключевые различия:
- Как упоминалось в моём предыдущем посте, вместо того чтобы заменять контент на пустую страницу, эти сайты сохраняют предыдущий контент на экране (без затухания или других эффектов) до тех пор, пока не загрузится новый.
- Как правило, значительно больше контента остаётся на экране даже после загрузки новой страницы. На этих сайтах в верхнем меню гораздо больше элементов, а иногда есть даже дополнительное верхнее меню, которое может оставаться в зависимости от нажатой ссылки. Также у них есть боковые меню, которые иногда тоже сохраняются после перехода на новую страницу. С другой стороны, у Discourse очень простое верхнее меню, и всегда остаются только иконка поиска, иконка «гамбургер»-меню и иконка пользователя.
Возможно, изменение поведения так, чтобы старый контент сохранялся до готовности нового, сработает хорошо. Но также возможно, что это не сработает просто потому, что при навигации в Discourse заменяется очень много контента, независимо от того, куда вы переходите.
7 лайков
В моем случае я использую баннеры категорий, баннеры тегов и боковую панель, отображающую категории на списках тем. Discourse по умолчанию также имеет некоторые маршруты, сохраняющие верхнюю или боковую панели, например, профили пользователей или группы. Я очень предпочитаю сохранять старый вид перед переходом, чтобы эти элементы на экране не скрывались, лишь чтобы появиться снова в том же месте.
7 лайков
Да, именно так мы используем новый компонент темы слайдера Discourse уже около недели, и нам он очень нравится. Мы просто отключили код перехода тела страницы и используем только слайдер.
Естественное действие браузера при загрузке (или перезагрузке) страницы обеспечивает переход; поэтому дополнительный код для затухания или скрытия любого HTML не требуется. Этот слайдер отлично выглядит без какого-либо дополнительного кода перехода страницы (затухание, скрытие и т. д.), и именно так мы уже неделю используем его на нашем сайте.
Спасибо за этот замечательный слайдер и за возможность настроить его как компонент темы!
4 лайка
Возможно, вы неправильно поняли, что я написал, но то, что я описал, не соответствует тому, как Discourse сейчас работает с этим компонентом темы. В настоящее время Discourse делает большую часть контента пустой страницей во время загрузки нового контента. Другие сайты, на которые я ссылался, сохраняют текущий контент во время загрузки нового. Это не одно и то же.
1 лайк
Я вполне уверен, что точно понял, что вы имели в виду, @seanblue (выше). Всё, что вы сказали, довольно просто, и ваш пост, на мой взгляд, был легко понятен.
Если закомментировать переход SCSS для body (анимацию) в оригинальном компоненте темы слайдера Discourse (кстати, я модифицировал компонент темы, сделав форк неделю назад, но есть и другие способы модификации компонента темы).
Тогда поведение будет именно таким, как вы описываете.
Текущая страница (в нашей модификации) отображается во время загрузки нового контента (что является обычным поведением при загрузке страницы без какой-либо дополнительной анимации body). «Затухание» и «исчезновение» (blanking), которые вы видите в текущих экспериментах Discourse, были вызваны кодом CSS-анимации body в версии темы (см. ниже), когда она была выпущена неделю назад.
Без CSS-анимации body слайдер загрузки проходит свой обычный цикл, и нет «исчезновения» или «затухания» body, поскольку эта анимация была указана в CSS компонента оригинальной темы. Большинство веб-сайтов (как вы отмечаете) не добавляют дополнительную анимацию к body, и именно поэтому вы сказали:
Это «норма»… что происходит после удаления анимации body из CSS (я говорю о выпуске неделю назад, так как я не отслеживал изменения; GitHub показывает, что наша модифицированная версия:
После того как мы внесли это изменение неделю назад, слайдер выглядит отлично (так говорят наши пользователи) и не требует дополнительной анимации body (появления или исчезновения, анимаций исчезновения и т. д.).
Ниже представлен CSS, который мы закомментировали в «первом выпуске» этого крутого слайдера. Это сработало для нас так хорошо (и наши пользователи в восторге), поэтому мы не следим за всеми последующими изменениями в коде экспериментов с «комбинированными спиннерами», исчезновением, анимацией body после того, как всё заработало для нас отлично; за исключением результатов, которые я вижу в экспериментах на meta).
// body #main-outlet {
// transition: opacity 0.2s ease;
// }
// body.loading #main-outlet {
// opacity: 0.2;
// transition: opacity var(--loading-duration) ease;
// }
Надеюсь, это поможет.
5 лайков
Ах, я не понял, что вы используете форк/модифицированную версию. Моя вина. Рад, что эта версия хорошо работает у вас. Надеюсь, они попробуют такой подход здесь, в Meta.
6 лайков
@david / @awesomerobot Я знаю, что мы уже не раз обсуждали это, но предлагаю перед внедрением эффекта затухания попробовать исходную реализацию (с небольшими доработками). Позвольте подытожить доступные варианты поведения при клике:
-
Оставлять старый контент на экране и переключаться на новый, когда он будет готов.
-
Показывать «белый экран» и переключаться на новый контент, когда он будет готов.
-
Плавно переходить к непрозрачному контенту (от 0 до, скажем, 40% прозрачности) и переключаться на новый контент, когда он будет готов.
При любом из этих вариантов мы также хотим добавить следующее: «Если контент загружается дольше 2 секунд, отображать индикатор загрузки».
Вариант (1) — единственное решение, минимизирующее переходные состояния. Да, к нему нужно немного привыкнуть: «Эй, я нажал, но вроде ничего не произошло». Но именно так работает веб: когда вы кликаете по гиперссылке, браузер не показывает белый экран и не затемняет страницу при переходе на другой сайт.
Вариант (2) — то, что у нас сейчас. Некоторые считают это резким, ведь одно из главных преимуществ этого паттерна — как раз избегание белых экранов. Это лишь очень-очень незначительное изменение по сравнению со старым индикатором загрузки.
Вариант (3) может быть очень отвлекающим: подобрать правильную непрозрачность сложно. По моему опыту, когда я пробовал этот вариант, через час использования глаза сильно уставали.
@david, мы уже всерьёз опробовали вариант (2). Не могли бы мы теперь в течение недели всерьёз попробовать вариант (1)? Мне кажется, это будет лучшим решением, так как он минимизирует изменения на экране.
9 лайков
Это… не совсем так. Сразу после клика запускается анимация загрузки. Посмотрите на вкладку в браузере в момент клика по ссылке. Обратите внимание, что при клике или нажатии иконка сайта немедленно меняется на индикатор загрузки.
5 лайков
Извините, да, именно это я и имел в виду: мы можем здесь симулировать что-то очень близкое к «стандартной» навигации (например, можем менять иконку на вкладке во время загрузки, можем менять текст на вкладке).
Когда вы кликаете по произвольной ссылке на сайте, текущая страница не становится полностью белой и не становится непрозрачной. Старый контент остаётся на экране в течение некоторого времени, пока не разрешится DNS для нового сайта и контент не будет готов к отрисовке.
Для меня главная сила этого компонента заключается в сокращении промежуточных состояний. Если мы сможем заставить это «ощущаться» как стандартная навигация браузера, подделав её, это было бы здорово.
12 лайков
Без проблем. Нам действительно нравится слайдер (с небольшим добавлением пикселей для десктопа), но мы выяснили, что анимации для тела страницы (мигание, плавное появление/исчезновение или что-то ещё) не нужны.
Слайдер достаточно хорошо показывает процесс загрузки; страница загружается и обновляется естественно, без добавления CSS-переходов для тела страницы или дополнительных спиннеров. Мы работаем в таком режиме уже 8–9 дней, пользователи довольны, и мне тоже нравится такой подход. Пользователям не нравились анимации «плавного появления/исчезновения», «мигания страницы» и «дополнительный спиннер + анимация слайдера»; но, впрочем, наши пользователи в целом не любят лишние анимации и различные веб-мелочи.
Надеюсь, команда Meta сохранит этот код как компонент темы или, как минимум, позволит владельцам сайтов переопределять то, что они в итоге выберут, поскольку, судя по всему, то, что нравится нашим пользователям, и то, что нравится другим, в плане переходов между страницами, различается.
Когда возникают сомнения, «будьте мягки и дайте сайтам возможность выбора» — хороший подход, как мне кажется.
3 лайка
звучит хорошо, я откатил компонент обратно к этой исходной реализации
7 лайков
Я думаю, что «ой, прошло 2 секунды, покажите спиннер» — это, безусловно, небольшая, но важная вещь, которую стоит добавить.
За исключением этого давайте посмотрим, что скажут люди; я думаю, что это, вероятно, версия, которую мы выпустим.
8 лайков
Где оно должно отображаться? В виде модального окна? Или #main-outlet следует скрыть через 2 секунды, чтобы освободить место для индикатора загрузки?
4 лайка
Я думаю, мы должны скрыть основной разъем. Возможно, стоит скорректировать пороговое значение: 2 выглядит немного произвольно, может быть, 3, 4 или 5?
6 лайков
Спиннер теперь будет отображаться через 2 секунды:
12 лайков
Это довольно круто: без дополнительного слоя спиннера через 2 секунды у пользователей начнутся странные вещи. Таким образом, мы получили лучшее из обоих миров: 1. Притворяемся молниеносно быстрыми благодаря слайдеру (здесь мы немного жульничаем, TBO). 2. Заполняем пробел, если загрузка зависла (психологический переход).
Отличная работа! 
8 лайков
Я только что протестировал это на симулированной медленной сети, и спиннер через 2 секунды определённо выглядит отлично. Хочу ещё раз подчеркнуть, что на десктопе (хотя бы на достаточно большом мониторе) индикатор загрузки практически незаметен. По-моему, увеличение высоты на 2–3 пикселя значительно улучшит восприятие.
5 лайков
Я слежу за этим обсуждением, так как я новый пользователь Discourse. Должен сказать, что я очень впечатлен уровнем продуманности и упорного труда, вложенными в эту очень «современную» функцию UX. Извините, что отошел от темы… но для человека, который годами пользовался другим форумным ПО, это действительно впечатляющее обсуждение.
Продолжайте в том же духе… эта функция мне очень нравится.
11 лайков
Возможно, стоит упомянуть, что я нажал на тему повторно, уже кликнув по ней, потому что подумал, что ошибся, хотя она уже загружалась с первого раза. Наверное, нужно просто привыкнуть к отсутствию индикатора загрузки…
5 лайков