Скелетоны v-skeleton-loader

v-skeleton-loader в библиотеке Vuetify предоставляет возможность создавать заполнительные скелетоны, которые визуально имитируют загрузку контента. Этот компонент особенно полезен для улучшения UX при асинхронной подгрузке данных.

Базовый синтаксис компонента:

<v-skeleton-loader type="text" />

Здесь type определяет стандартный вид скелетона. Доступные варианты: text, avatar, image, card, list-item, paragraph, heading.

Ключевые свойства:

  • loading — логическое значение. Если true, компонент отображает скелетон, если false, показывается реальный контент.
  • type — строка или массив строк с предопределёнными типами скелетона.
  • width и height — позволяют задать размеры скелетона вручную.
  • color — задаёт цвет скелетона.
  • tile — логическое значение, если true, углы скелетона становятся прямыми, без скруглений.
  • elevation — добавляет тень к скелетону, аналогично карточкам Vuetify.

Пример использования с кастомными размерами:

<v-skeleton-loader
  type="image"
  width="300"
  height="200"
/>

Композиция скелетонов

Скелетоны могут комбинироваться для имитации сложного интерфейса, например карточки пользователя с аватаром и текстом:

<v-skeleton-loader type="card">
  <template #default>
    <v-skeleton-loader type="avatar" class="mb-2" />
    <v-skeleton-loader type="heading" class="mb-1" />
    <v-skeleton-loader type="text" />
  </template>
</v-skeleton-loader>

В данном примере используется слот default, позволяющий вставлять несколько скелетонов внутри одной структуры. Комбинация типов создаёт визуальный эффект полноценной карточки, которая ещё не загружена.

Настройка анимации и цветов

Анимация скелетона по умолчанию представлена плавным пульсирующим эффектом. Она может быть отключена через loading или изменена через свойство type.

<v-skeleton-loader
  type="text"
  :loading="true"
  class="skeleton-pulse"
/>

Для более точной настройки можно использовать CSS-переменные Vuetify:

.skeleton-pulse {
  --v-skeleton-loader-background: #e0e0e0;
  --v-skeleton-loader-highlight: #f5f5f5;
}

Цвета и градиенты позволяют адаптировать скелетоны под общий стиль приложения.

Динамическая подгрузка данных

Использование v-skeleton-loader вместе с асинхронными вызовами данных делает интерфейс более отзывчивым. Пример с v-if:

<template>
  <div>
    <v-skeleton-loader v-if="loading" type="list-item" />
    <v-list v-else>
      <v-list-item v-for="item in items" :key="item.id">
        {{ item.name }}
      </v-list-item>
    </v-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      items: [],
    };
  },
  mounted() {
    setTimeout(() => {
      this.items = [
        { id: 1, name: 'Первый элемент' },
        { id: 2, name: 'Второй элемент' },
      ];
      this.loading = false;
    }, 2000);
  },
};
</script>

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

Кастомизация через массивы типов

Для создания уникальных интерфейсов можно передавать массив типов:

<v-skeleton-loader :type="['avatar', 'heading', 'text']" />

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

Работа со слотами для полной кастомизации

Слоты открывают возможность создавать собственные структуры скелетона, не ограничиваясь стандартными типами. Пример скелетона карточки продукта:

<v-skeleton-loader>
  <template #default>
    <v-skeleton-loader type="image" height="180" />
    <v-skeleton-loader type="heading" />
    <v-skeleton-loader type="text" />
    <v-skeleton-loader type="text" width="60%" />
  </template>
</v-skeleton-loader>

Использование слотов даёт полный контроль над визуальной структурой, позволяя повторить точный макет будущего контента.

Практические советы

  • Использовать v-skeleton-loader для карточек, списков, профилей, чтобы минимизировать ощущение задержки при загрузке данных.
  • Сочетать стандартные типы с кастомными слотами для достижения нужного визуального эффекта.
  • Настраивать цвета и размеры в соответствии с дизайном приложения.
  • Компонент совместим с Vuetify 2 и 3, но стоит проверять документацию для конкретной версии, так как некоторые свойства могут отличаться.

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

Оглавление