В сети много примеров прелоадеров (loaders, spinner), которые появляются во время загрузки страницы. Их основная задача — скрыть страницу до момента полной ее загрузки. С точки зрения юзабилити это совершенно бесполезно и даже вредно — так как большинству пользователей достаточно, чтобы была загружена только видимая часть страницы, с которой уже можно взаимодействовать — читать текст, нажимать на ссылки и кнопки и тд. С прелоадером же ничего этого не будет 2-5 секунд, пока вся страница не загрузится — придется смотреть на прелоадер. Не знаю зачем, но некоторые сайты пользуются такой штукой.
В том числе и pwa-приложения — их разработчики пытаются копировать поведение нативных приложений. Но многие совершают большую ошибку, когда включают анимацию прелоадера во время загрузки страницы. Так как после нажатия на кнопку проходит секунда или даже несколько секунд, когда pwa-приложение еще не начало загружать новую страницу, а пользователь уже не понимает, почему на нажатие кнопки нет никакой реакции («колесико не крутится»). И нажимает на кнопку еще раз. Особенно это заметно, когда pwa-приложение медленно рендерит страницу или хостинг/сервер работает медленно.
Нативные приложения не имеют такой задержки перед загрузкой новой страницы и анимация загрузки там появляется сразу после нажатия на кнопку. Этого же можно добиться и в pwa-приложении. Достаточно разместить небольшой код где-то в самом низу страницы.
<div class="preloader none">Preloader</div>
<a href="https://codepen.io/">Ссылка</a>
<script>window.onbeforeunload = function() {document.querySelector('.preloader').classList.remove('none');};</script>
<style>
.none {display:none;}
</style>
Благодаря этому коду прелоадер будет появляться сразу после нажатия любой ссылки на странице (которая уводит с нее) и до момента, пока не начнет загружаться новая страница. Разумеется, в блок preloader можно разместить что угодно (например, любой прелоадер отсюда).