Комментарии 6
Статья огонь! Как и твой компонент в работе 😉
Спасибо, хорошая статья.
Как вы различаете заглушку и скелетон? только по анимации?
По реализации: на всех проектах где мы делали скелетоны это отдельная разметка, которая удаляется после того как контент доехал. То есть можно сделать все что угодно.
Спасибо за комментарий, интересный вопрос!
Скелетоны — технически, это те же заглушки, просто в другом масштабе, индивидуальные, для каждого компонента. То есть, отдельные, для каждой кнопки, инпута, картинки, <p> и так далее. И они используются в уже существующей вёрстке страницы.
Думаю, как пример, можно посмотреть пример кода здесь: https://mui.com/material-ui/react-skeleton/#wave-example
В примере у нас есть готовая карточка видео, внутри которой каждый блок обёрнут компонентом скелетона. Если обернуть всю карточку загрузчиком — это будет классическая заглушка, внутрь которой уже надо будет закинуть спиннер или сверстать блоки, чтобы было похоже на скелетоны. И, в принципе, пользователи не заметят разницы.
Самое интересное в реализации. За счёт независимых друг от друга косточек, скелетоны позволяют загружать страницу частями, хоть каждый абзац текста можно запрашивать с сервера индивидуально (понятно, так никто делать не будет, но это может быть полезно). Например, у нас есть таблица, а в ней есть крайне ресурсоёмкие ячейки, которые будут грузиться очень долго. Скелетоны позволят их загружать отдельно, то есть, загрузить и отобразить «быструю» часть ячеек, а «долгие» ячейки отобразатся позже.
В визуальном плане — заглушку можно стилизовать под скелетоны и пользователь даже не заметит разницы. А подкапотка у скелетонов сложнее, но даёт свои бонусы. То есть, различие именно в реализации и, иногда, в подходе дизайнера.
Надеюсь, получилось ответить)
Спасибо. Но все же, в чем разница между
Если обернуть всю карточку загрузчиком — это будет классическая заглушка, внутрь которой уже надо будет закинуть спиннер или сверстать блоки, чтобы было похоже на скелетоны.
и скелетоном? Только разбитие на куски компонента и возможностью управлять или по отдельности? Для карточки как по ссылке можно так сделать и в принципе мало что изменится (ну надо будет подождать пока все данные доедут, да :—).
По реализации — да, получается что внутри компонента добавлена при помощи <Skeleton/> разметка, которая скорее всего удаляется когда приедут данные.
Когда писал комментарий понял что можно дополнить статью областью видимости скелетонов: при загрузке страницы не обязательно ее всю рендерить, достаточно высоты пользовательского экрана и запрета скролла страницы через overflow: hidden.
Как проектировать скелетоны