Progress

Паттерны

Прогресс асинхронной задачи

Когда использовать:

• Задача со временем продвигается к завершению.

Заметки по композиции:

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

Компромиссы:

• Явное ощущение продвижения.
• Вводит в заблуждение, если значения лишь угаданы.

import { Button, Progress, ProgressTrack, Text } from '@vega-ui/react';
import { useEffect, useId, useState } from 'react';

export default function ParentOwnedUploadProgress() {
  const labelId = useId();
  const [percent, setPercent] = useState(0);
  const [running, setRunning] = useState(false);

  const done = percent === 100;
  const uploading = running && !done;

  useEffect(() => {

Неопределённая операция

Когда использовать:

• Работа идёт, но степень выполнения неизвестна.

Заметки по композиции:

• Чётко отличайте это состояние от определённого прогресса.
• Текст рядом должен прямо говорить о выполняющейся операции.

Компромиссы:

• Лучше, чем выдуманные проценты.
• Менее информативно, чем определённый прогресс.

import { Button, Progress, ProgressTrack, Text } from '@vega-ui/react';
import { useEffect, useId, useState } from 'react';

type Phase = 'idle' | 'preparing' | 'importing' | 'done';

export default function IndeterminateProgress() {
  const labelId = useId();
  const [phase, setPhase] = useState<Phase>('idle');
  const [total, setTotal] = useState(0);
  const [imported, setImported] = useState(0);

  useEffect(() => {

Прогресс внутри оверлеев

Когда использовать:

• Диалог или шторка (Sheet) управляет выполняющейся операцией.

Заметки по композиции:

• Держите прогресс рядом с задачей, которой он принадлежит.
• Используйте полную ширину, когда раскладка оверлея это позволяет.

Компромиссы:

• Обратная связь остаётся рядом с выполняющейся операцией.
• Может выглядеть визуально тяжело, если рядом слишком много индикаторов статуса.

import {
  Button,
  Dialog,
  DialogClose,
  DialogContent,
  DialogTrigger,
  Heading,
  Icon,
  IconButton,
  Progress,
  ProgressTrack,
  Text,

Сравнение

Быстрое правило выбора

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

Progress или Meter

Используйте Progress, когда:

• значение отражает выполнение задачи или ход асинхронной операции

Используйте Meter, когда:

• значение — ограниченное измерение или оценка

Главный компромисс: прогресс — это выполнение во времени, а meter — описательное измерение.

Progress или Spinner

Используйте Progress, когда:

• можно показать хоть какую-то степень выполнения

Используйте Spinner, когда:

• доступна только обратная связь о загрузке без определённого объёма

Главный компромисс: прогресс сообщает объём, а спиннер — активность без диапазона.

Progress или MeterStack

Используйте Progress, когда:

• достаточно одного сигнала о выполнении

Используйте MeterStack, когда:

• значение складывается из нескольких значимых частей, а не из одной величины выполнения

Выбирайте этот компонент, когда

• Задача движется к завершению.
• Значение может отражать выполнение во времени.
• Определённая или неопределённая полоса — подходящая ментальная модель.
• полоса должна восприниматься как прогресс, а не как описательное измерение

Не выбирайте этот компонент, когда

• Значение — статичная оценка или измерение ёмкости.
• Модели выполнения в виде полосы нет.
• Спиннер лучше передаёт неопределённость состояния.

Решение проблем

Вероятно, здесь нужен Meter

Симптом

Полоса отображается, но значение на самом деле — оценка, квота или ёмкость, а не выполнение задачи.

Вероятная причина

Progress выбран для описательного измерения вместо модели выполнения во времени.

Как проверить

• Спросите себя, меняется ли значение со временем по направлению к завершению.

Исправление

• Переключитесь на Meter для ограниченных описательных измерений.

Пользователи не понимают, что выполняется

Симптом

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

Вероятная причина

Компонент отрендерен без поясняющего текстового контекста.

Как проверить

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

Исправление

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

Определённому прогрессу не доверяют

Симптом

Проценты меняются странно или перестают соответствовать реальной операции.

Вероятная причина

Отображаемые значения не отражают реальное состояние выполнения.

Как проверить

• Сравните показанное значение с реальными этапами задачи.

Исправление

• Используйте реальные значения прогресса.
• Переключитесь на неопределённый режим, когда точный прогресс недоступен.