Обработка состояний загрузки

Naive UI предоставляет набор компонентов, которые позволяют гибко управлять состояниями загрузки в интерфейсе. Основные элементы для работы с загрузкой — это NButton, NSpin, NLoadingBar, а также встроенные свойства компонентов, такие как loading и loading-position. Рассмотрим подробно их использование и лучшие практики интеграции в приложения на Vue.js с использованием Naive UI.

Свойство `loading` у кнопок

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

<template>
  <n-button :loading="isLoading" @click="fetchData">
    Загрузить данные
  </n-button>
</template>

<script setup>
import { ref } from 'vue'

const isLoading = ref(false)

const fetchData = async () => {
  isLoading.value = true
  try {
    await fetch('/api/data')
  } finally {
    isLoading.value = false
  }
}
</script>

loading — принимает true или false.
Когда loading активен, кнопка блокируется и показывает анимацию.

Дополнительно можно управлять позицией индикатора с помощью loading-position (left или right), что позволяет улучшить визуальное соответствие дизайну:

<n-button :loading="true" loading-position="right">
  Сохранить
</n-button>

Компонент NSpin

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

<n-spin :show="isLoading">
  <div v-if="data">
    {{ data }}
  </div>
</n-spin>

Свойство show определяет видимость индикатора.
Поддерживается возможность добавления текста или кастомного слота через slot:

<n-spin :show="isLoading">
  <template #default>
    Загрузка данных...
  </template>
</n-spin>

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

Полоса загрузки NLoadingBar

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

import { NLoadingBarProvider, useLoadingBar } from 'naive-ui'

const loadingBar = useLoadingBar()

const loadData = async () => {
  loadingBar.start()
  try {
    await fetch('/api/data')
    loadingBar.finish()
  } catch {
    loadingBar.error()
  }
}

Методы:
- start() — начинает анимацию.
- finish() — завершает успешно.
- error() — отображает состояние ошибки.
- update(percent) — обновляет прогресс вручную (0–100%).

Совет: Использование NLoadingBar совместно с глобальными перехватчиками Axios позволяет автоматически показывать прогресс при всех HTTP-запросах.

Управление состоянием загрузки через реактивные свойства

Naive UI не ограничивается встроенными индикаторами: все компоненты позволяют использовать реактивные переменные Vue для управления состоянием:

import { ref } from 'vue'

const isLoading = ref(false)
const data = ref(null)

const loadData = async () => {
  isLoading.value = true
  try {
    const response = await fetch('/api/data')
    data.value = await response.json()
  } finally {
    isLoading.value = false
  }
}

Такой подход позволяет централизованно управлять состоянием загрузки и применять его ко множеству компонентов.

Комбинированные сценарии

Иногда необходимо одновременно отображать индикатор внутри кнопки, блокировать содержимое и показывать прогресс сверху страницы. Для этого компоненты Naive UI можно комбинировать:

<n-loading-bar-provider>
  <n-spin :show="isLoading">
    <n-button :loading="isLoading" @click="loadData">
      Загрузить
    </n-button>
    <div v-if="data">{{ data }}</div>
  </n-spin>
</n-loading-bar-provider>

NLoadingBarProvider позволяет использовать глобальный прогресс.
NSpin блокирует область контента.
NButton информирует пользователя о процессе на уровне конкретного действия.