Skeleton loader
Skeleton loader (Скелетон лоадер, он же скелетная загрузка, призрак контента, серая эктоплазма интерфейса, визуальный аналог обещаний политика) — это такая специальная форма издевательства над Анонимусом в современном веб-дизайне и разработке. Представляет собой не что иное, как заглушку, имитирующую структуру ещё не загрузившегося контента на веб-странице или в приложении. Вместо того чтобы честно показать юзеру крутилку-спиннер или, о ужас, пустое место, хитрожопые веб-макаки рисуют серые, часто анимированные мерцанием, блоки там, где скоро (возможно, когда-нибудь, если JavaScript не упадёт) появится текст, картинки и прочий корован.
Зачем оно надо[править]
Изначально, идея была вроде как благая. Хомячки, как известно, терпением не отличаются. Видя пустой белый экран или бесконечно вращающийся кружок ада, они начинают нервничать, бешено кликать F5, а то и вовсе закрывают вкладку, проклиная медленный инторнет и криворуких разрабов. UX-гуру смекнули: надо дать пользователю ощущение прогресса, даже если реального прогресса нет нихуя. Скелетон лоадер как бы говорит: «Спокойно, браток, ща всё будет! Видишь, вот тут будет заголовок, тут картинка, а тут простыня текста. Мы работаем над этим, честно-честно!» Это такой визуальный плацебо, призванный усыпить бдительность и снизить фрустрацию от ожидания, пока тонны джаваскрипта и километры CSS наконец отрисуют реальный контент. Особенно это актуально для SPA и прочих хипстерских фреймворков, где первая загрузка может напоминать ожидание второго пришествия.
Раньше был спиннер. Он честно говорил: "Я гружусь". А скелет врёт. Он говорит: "Я почти загрузился", хотя на самом деле может даже не начинал.
Как это выглядит и где встречается[править]
Выглядит это обычно как набор серых или светло-серых прямоугольников разного размера, повторяющих очертания будущих элементов интерфейса. Иногда эти серые призраки анимированы — по ним пробегает светлая волна, имитирующая блик или процесс «наполнения». Это, по задумке, должно добавлять динамики и намекать, что процесс не завис, а идёт полным ходом. Ну, или просто чтобы юзер не уснул от созерцания статичной серости.
Встретить эту благодать можно практически везде, где водятся современные веб-технологии и забота о perceived performance (воспринимаемой производительности). Facebook, YouTube, LinkedIn, многочисленные новостные сайты и даже некоторые десктопные приложения (привет, Electron!) — все они радостно показывают тебе кости будущего интерфейса, пока реальный контент плетётся где-то по сети. Иногда это сделано более-менее толково, и скелет действительно похож на то, что появится на его месте. А иногда… иногда это просто рандомный набор серых фигур, имеющих к финальному виду страницы такое же отношение, как Ёжик резиновый к адронному коллайдеру.
Почему это иногда бесит[править]
Казалось бы, ну заглушка и заглушка, чего бугуртить? Но Луркморье не было бы Луркморьем без праведного гнева.
Во-первых, это обман. Оно не ускоряет загрузку ни на йоту, просто маскирует её. Это как ремонт дороги, когда вместо нового асфальта просто ставят красивые знаки «Работает техника!». Вроде что-то происходит, а по факту — едешь по тем же ямам.
Во-вторых, кривая реализация. Иногда скелет настолько убог и непохож на реальный контент, что когда последний наконец загружается, происходит сдвиг вёрстки, всё прыгает, и ты промахиваешься по нужной ссылке. Или анимация мерцания сделана так вырвиглазно, что вызывает лёгкий припадок. А бывает, что скелет слишком похож на реальный, но неинтерактивный контент, и ты тщетно пытаешься кликнуть на серый прямоугольник, думая, что это уже кнопка загрузилась. Фейл.
Ну и в-третьих, это просто символ современного жирного веба. Вместо того чтобы оптимизировать ресурсы, уменьшать бандлы и ускорять бэкенд, проще налепить красивую (нет) заглушку и сделать вид, что всё зашибись. Профит! Эффективные менеджеры довольны, дизайнеры вписали модный паттерн в портфолио, а юзер… а юзер подождёт, не развалится.
