Я хочу заменить анимацию заставки Discourse на анимацию Pulse. (пожалуйста, посмотрите анимацию на codepen)
Как мне это сделать?
Я не знаю, но хотел бы поднять ещё один момент: если пользователь видит анимацию загрузки, значит, есть проблемы куда серьёзнее, чем её внешний вид. А когда Googlebot её видит и ставит чуть более высокие оценки, ему всё равно, как это выглядит 
Моя позиция следующая:
- как изменить анимацию — не важно;
- нужно исправить все причины, по которым Discourse отвечает так медленно (в основном на уровне сервера), и для решения этой проблемы акселератору может потребоваться поддержка.
Я не видел никаких анимаций загрузки после… последних двух обновлений/апгрейдов. Это означает, что Discourse теперь работает быстрее, чем раньше.
Собственно, проблема не в сбоях сервера и не в чём-то другом. Я из Шри-Ланки. В последнее время мы переживаем масштабный экономический кризис. Из-за него власти вынуждены вводить веерные отключения электроэнергии, поскольку не могут обеспечить работу тепловых электростанций из-за нехватки топлива. В результате этих отключений телекоммуникационные компании вынуждены снижать скорость интернет-соединения, чтобы экономить заряд батарей. Поэтому в последние дни скорость интернета у нас крайне низкая.
Что ж, ситуация в Шри-Ланке действительно плохая. Ваш случай — исключение, если/когда ваша основная аудитория также находится в Шри-Ланке.
Надеюсь, кто-нибудь сможет направить вас в нужном направлении. Но насколько мне известно, это нелегко изменить.
Спасибо, дружище. Посмотрим, как это сделать.
Я не думаю, что редактирование из темы возможно, так как это потребовало бы изменения файла ERB; в частности, этого: discourse/app/views/common/_discourse_splash.html.erb at main · discourse/discourse · GitHub
Поскольку экран заставки загружается до того, как загрузится значительная часть приложения Discourse, я подозреваю, что сделать это настраиваемым будет довольно сложно? @Johani, так ли это?
Это верно 
Сплэш-экран загружается до загрузки основных JS/CSS. Текущая реализация не ориентирована на кастомизацию, но в версии 2 это изменится. План состоит в том, чтобы загружать изображение сплэш-экрана из localStorage для незначительного повышения производительности, а также потому, что это позволяет администраторам задавать пользовательское изображение через встроенный тег <script> в поле head_tag темы.
На данный момент точных сроков выполнения этой работы нет, потребуется дополнительное тестирование, но она запланирована.
Вы не можете напрямую редактировать шаблон ERB для экрана загрузки из темы, а поскольку экран загрузки отображается до загрузки основных CSS/JS, его кастомизация затруднена.
CSS, который вы пишете в обычных вкладках CSS/SCSS темы, компилируется и загружается только после того, как появится экран загрузки. Поэтому даже если ваш CSS работает там, оригинальные точки всё равно будут кратковременно отображаться при загрузке.
Тем не менее, вы можете переопределить анимацию экрана загрузки, внедрив встроенный CSS внутрь тега head_tag вашей темы. Это обеспечит немедленное применение ваших стилей и предотвратит мерцание точек по умолчанию.
Вот пример, который заменяет анимацию точек по умолчанию на эффект Pulser, похожий на тот, что в вашем Codepen:
<style>
:root {
--pulser-color-1: #ffcc00;
--pulser-color-2: #ff6347;
}
#d-splash .dots {
all: unset;
position: absolute;
width: 1.6em;
height: 1.6em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#d-splash .dots[style*="--n:-2"] { transform: translate(-300%, -50%); }
#d-splash .dots[style*="--n:-1"] { transform: translate(-150%, -50%); }
#d-splash .dots[style*="--n:0"] { transform: translate(0%, -50%); }
#d-splash .dots[style*="--n:1"] { transform: translate(150%, -50%); }
#d-splash .dots[style*="--n:2"] { transform: translate(300%, -50%); }
#d-splash .dots::before,
#d-splash .dots::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid var(--pulser-color-1);
top: 0;
left: 0;
opacity: 0;
animation: pulse 1s ease-out infinite;
}
#d-splash .dots::before {
border-color: var(--pulser-color-2);
animation-delay: 0.3s;
}
@keyframes pulse {
0% {
transform: scale(0.5);
opacity: 0.6;
}
50% {
transform: scale(1.2);
opacity: 0.3;
}
100% {
transform: scale(1.8);
opacity: 0;
}
}
</style>
Примечание: браузер не может парсить SCSS внутри тега <style>. Поэтому вы не можете просто вставить SCSS внутрь. Вместо этого используйте CSS.
Результат:
Вам нужно создать новый компонент темы, нажать «Редактировать код», открыть тег Head и вставить вышеуказанный блок <style>.
Сохраните изменения и выполните полную перезагрузку страницы, чтобы сразу увидеть обновлённую анимацию пульсации на экране загрузки.
Это удобное решение, пока в Discourse не будет реализована более гибкая настройка экранов загрузки в запланированном обновлении v2.
Мы анонсировали новую функцию, позволяющую использовать пользовательское изображение: Branding the Discourse splash screen with custom SVG images