Дизайн loading-состояний

Спроектируй loading-состояние для: {{screen}}.

Решение №1: нужно ли вообще?

• < 100ms — ничего не показывай
• 100-300ms — лёгкий fade
• 300ms-1s — скелетон или спиннер
• 1-10s — скелетон + опционально прогресс

• 10s — прогресс-бар обязательно + что происходит

Типы

A. Skeleton (рекомендую для большинства)

• Силуэты будущих блоков
• Совпадают по форме и размеру с реальным контентом
• Лёгкая shimmer-анимация (не агрессивная)
• Не блокируют интерфейс — пользователь видит структуру

B. Spinner

• Когда контент непредсказуем по форме
• Когда фон тёмный и скелетон не сработает визуально
• Не на кнопке, ждущей submit — там лучше disabled + текст

C. Progress bar

• Когда известен прогресс (upload, download, multi-step)
• НЕ "псевдо-прогресс" что доходит до 90% и стоит — это обман

D. Optimistic UI

• Меняем интерфейс сразу, не дожидаясь сервера
• При ошибке — откатываем + тост
• Лучшее ощущение скорости

Принципы

• Loading НЕ должен прыгать (CLS = 0)
• Skeleton ширина ≈ ширина контента (текст переменной длины — не на всю ширину)
• Не комбинируй несколько индикаторов одновременно
• "Loading..." без контекста = бесполезно. "Загружаем 234 заказа..." = полезно

Реализация (псевдо-React)

function Page() {
  const { data, isLoading } = useData();
  if (isLoading) return <SkeletonGrid />;
  return <RealGrid data={data} />;
}

Anti-patterns

• Skeleton 5 секунд (исправь то, что грузится 5 секунд, а не показывай это пользователю)
• Spinner поверх ещё одного spinner
• Текст "Идёт загрузка" внутри уже загруженного контента
• Skeleton для уже закешированных данных