В начале статьи хотелось бы обозначить два момента:
- Медленное интернет-соединение было, есть и навряд ли покинет нас в ближайшем будущем.
- Люди ненавидят ждать, особенно если время ожидания не известно.
Как решить эту проблему?
В рамках возможностей веб-разработчиков навряд ли получится провести на всей планете высокоскоростной интернет или изменить натуру человека.
Но в наших силах успокоить людей: «приложение загружается, просто нужно чуть подождать». Это можно сделать с помощью прелоадера. Но пользовательский опыт можно улучшить, немного изменив классический прелоадер.
Что не так с классическим прелоадером?
Классический прелоадер знаком всем: крутящаяся вокруг своей оси штука, которая бесит пользователей. Окей, не всех и не всегда, но подталкивает к тому, чтобы пользователь испытал негативные эмоции. А причина простая — неопределённость. Пользователь ничего не знает о том, что ждёт его сразу после неопределённого времени. Конечно, пользователи заходят и в знакомые приложения, но дизайн даже знакомых приложений склонен к переменам.
Что так со Скелетоном?
Это улучшенная версия прелоадера, которая решает один вопрос из двух: что пользователь увидит после загрузки приложения. А увидит пользователь сильно упрощённую версию приложения. Эта версия ещё не готова, чтобы ею пользоваться, но даёт примерное представление об интерфейсе.
Что не так со скелетоном?
Допустим, имеется React-приложение, и в минимальном наборе приложение весит 500 кб. Многовато для медленного интернета, поэтому реализовывать вёрстку скелетона в рамках React-приложения нерационально, так как он не будет выполнять свою функцию. Поэтому скелетон рекомендуется верстать более простыми средствами, которые сервер может вернуть моментально: пара сотен строк CSS и столько же HTML. Это особенно актуально, когда мы не можем обмазаться SSR.
Из-за этого возникают трудности с синхронизацией боевой вёрстки и вёрстки скелетона: например, если где-то в приложении обновились отступы, то нужно из изменить и в скелетоне. Иначе переход от скелетона к приложению будет дёрганым.
Пожалуй, недостатки скелетона на этом и заканчиваются.
Нюансы
Предположим, скелетон заточен под главную страницу. А что если пользователь запросил страницу, которая отличается по структуре от той, по которой делался скелетон? Скорее всего, придётся делать скелетон для всех страниц, на которые может прийти пользователь, и как-то отдавать их сервером.
В общем, нюансов много, универсального решения нет. Одно знаю точно: скелетон — это здорово.
