Przejdź do treści
prfct.dev

Ładowanie

Szkielety, spinnery, postęp i optymistyczne aktualizacje — dobrane do tego, jak długo ludzie będą czekać i ile wiesz o tym oczekiwaniu.

Oczekiwanie wydaje się krótsze, gdy widać, że coś się dzieje, i mniej więcej wiadomo, co się pojawi. Wskaźnik dobieraj do tego, jak długo trwa oczekiwanie i ile o nim wiesz.

Członkowie zespołu

Szkielet dokładnie odwzorowuje docelowy układ, więc nic nie przeskakuje, gdy dane się załadują.

Wybór wskaźnika

OczekiwanieZnany kształt?Co pokazać
< 100 ms—Nic. Cokolwiek pokażesz, tylko mignie.
100 ms – 1 sTakSzkielet, który odwzorowuje docelowy układ.
100 ms – 1 sNieSpinner z opóźnieniem ok. 200 ms, żeby przy szybkich odpowiedziach w ogóle się nie pojawiał.
1 s – 10 s—Pasek postępu, jeśli możesz zmierzyć postęp; w przeciwnym razie spinner z etykietą.
> 10 s—Postęp z szacowanym czasem — pozwól też wyjść i wrócić później, a po zakończeniu wyślij powiadomienie.

Szkielety

  • Odwzoruj docelowy układ co do piksela — te same wysokości, ten sam rytm — żeby nic się nie przesunęło, gdy pojawi się treść.
  • Oznacz ładowany obszar atrybutem aria-busy="true"; same szkielety mają aria-hidden.
  • Przy ograniczonym ruchu połysk się zatrzymuje, ale kształt zastępczy zostaje.

Przyciski

Akcje, które wymagają czasu, pokazują własny postęp dzięki Button loading: etykietę zastępuje spinner, a przycisk nie zmienia przy tym szerokości; ponowna aktywacja jest zablokowana, a fokus zostaje na miejscu.

Optymistyczne aktualizacje

Gdy akcja prawie zawsze się udaje — oznaczanie gwiazdką, archiwizowanie, zmiana kolejności — zaktualizuj interfejs od razu, a stan uzgodnij w tle. Jeśli coś się nie powiedzie, wycofaj zmianę i poinformuj o tym powiadomieniem. Optymistyczne akcje, które coś usuwają, łącz z możliwością cofnięcia, a nie z potwierdzeniem — zobacz Akcje nieodwracalne.