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