Привет .
Меня зовут Михаил, более 10 лет разрабатываю интернет-проекты: от сайтов до систем автоматизации.

В начале статьи хотелось бы обозначить два момента:

  1. Медленное интернет-соединение было, есть и навряд ли покинет нас в ближайшем будущем.
  2. Люди ненавидят ждать, особенно если время ожидания не известно.

Как решить эту проблему?

В рамках возможностей веб-разработчиков навряд ли получится провести на всей планете высокоскоростной интернет или изменить натуру человека.

Но в наших силах успокоить людей: «приложение загружается, просто нужно чуть подождать». Это можно сделать с помощью прелоадера. Но пользовательский опыт можно улучшить, немного изменив классический прелоадер.

Что не так с классическим прелоадером?

Классический прелоадер знаком всем: крутящаяся вокруг своей оси штука, которая бесит пользователей. Окей, не всех и не всегда, но подталкивает к тому, чтобы пользователь испытал негативные эмоции. А причина простая — неопределённость. Пользователь ничего не знает о том, что ждёт его сразу после неопределённого времени. Конечно, пользователи заходят и в знакомые приложения, но дизайн даже знакомых приложений склонен к переменам.

Что так со Скелетоном?

Это улучшенная версия прелоадера, которая решает один вопрос из двух: что пользователь увидит после загрузки приложения. А увидит пользователь сильно упрощённую версию приложения. Эта версия ещё не готова, чтобы ею пользоваться, но даёт примерное представление об интерфейсе.

Что не так со скелетоном?

Допустим, имеется React-приложение, и в минимальном наборе приложение весит 500 кб. Многовато для медленного интернета, поэтому реализовывать вёрстку скелетона в рамках React-приложения нерационально, так как он не будет выполнять свою функцию. Поэтому скелетон рекомендуется верстать более простыми средствами, которые сервер может вернуть моментально: пара сотен строк CSS и столько же HTML. Это особенно актуально, когда мы не можем обмазаться SSR.

Из-за этого возникают трудности с синхронизацией боевой вёрстки и вёрстки скелетона: например, если где-то в приложении обновились отступы, то нужно из изменить и в скелетоне. Иначе переход от скелетона к приложению будет дёрганым.

Пожалуй, недостатки скелетона на этом и заканчиваются.

Нюансы

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

В общем, нюансов много, универсального решения нет. Одно знаю точно: скелетон — это здорово.