[Feature] Состояние скелета для каждого компонента

[lihachyov]

Есть задача поддержать скелеты компонентов, отображающие серые прямоугольники как плейсхолдеры во время загрузки данных, предварительно показывая структуру элементов.

Предлагается подумать насчёт реализации скелета. Возможно ли добавить state для каждого UI-компонента, когда данные в них могли бы отображаться схематично как на скриншоте?

[pfrankov]

@lihachyov переоткрой, когда будет дизайн

[eolme]

@pfrankov так issue не закрываются, фича актуальна и не реализована

[Zaycevq]

Будем брать в работу командой Дизайна. Частично Скелетоны уже реализовывали, нужно будет эту логику перенести на компоненты VKUI

[inomdzhon]

Спасибо, @Zaycevq 🙏

---

Надо будет взвесить насколько это усложнит код, если говорить о том, что для всех компонентов надо будет завести параметр меняющий состояния на скелетон.

Вижу пару вариантов для упрощения:

1. Если не ошибаюсь, скелетон зачастую отображает лишь грубый шаблон лэйаута, поэтому возможно стоит создать компонент Skeleton, который будет принимать параметры, помогающие визуально набросать тот или иной компонент. Да, прям как на скриншоте выше тогда не будет.
2. Делаем тот же Skeleton, но пробрасываем в компонент

   <Component before={loading ? <Skeleton width={24} height={24} /> : <Avatar src="example.png" />}>
      {loading ? <Skeleton height={16} /> : data}
   </Component>

В общем, надо обсуждать)

[eugpoloz]

Как насчет превратить этот issue в дискуссию? Уже по технической реализации, так скажем. (% Почему: задача все равно слишком объемная и мы 100% будем ее дробить. Можем завести milestone "Скелетоны" и под него уже их подбивать.

@inomdzhon

Надо будет взвесить насколько это усложнит код, если говорить о том, что для всех компонентов надо будет завести параметр меняющий состояния на скелетон.

(Это еще может быть группа компонентов типа AvatarSkeleton, TypographySkeleton и так далее, если речь про несколько грубых атомарных компонентов.)