angular-ui-patterns
Wzory UI dla Angular: stany ładowania, obsługa błędów i wyświetlanie danych
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Zbiór sprawdzonych wzorów projektowych do budowania komponentów Angular. Dowiesz się, kiedy pokazywać wskaźniki ładowania, jak obsługiwać błędy i wyświetlać dane asynchroniczne. Skill obejmuje praktyczne przykłady dla skeleton loaderów, stanów pustych, stanów błędu i progresywnego ujawniania treści. Idealne, gdy pracujesz z asynchronicznym pobieraniem danych i zarządzaniem stanami komponentów.
Jak używać
Zainstaluj skill angular-ui-patterns w swoim projekcie Angular. Skill zawiera gotowe komponenty i wzory, które możesz zintegrować z istniejącym kodem.
Zapoznaj się z główną regułą: pokazuj wskaźnik ładowania TYLKO wtedy, gdy brak danych do wyświetlenia. Unikaj wyświetlania spinnera, gdy masz już dane na ekranie — zamiast tego pokaż skeleton loader lub zaktualizuj istniejące elementy.
Implementuj drzewo decyzyjne dla stanów: najpierw sprawdź, czy jest błąd (pokaż stan błędu z opcją ponowienia), następnie czy trwa ładowanie bez danych (pokaż skeleton), potem czy masz dane (wyświetl listę) czy brak danych (pokaż pusty stan).
Wybierz odpowiedni typ wskaźnika ładowania: użyj skeleton loadera, gdy znasz kształt treści (listy, karty, ładowanie strony), lub spinnera, gdy kształt jest nieznany (modalne akcje, wysyłanie formularza, operacje inline).
Zastosuj optimistic updates — aktualizuj interfejs natychmiast, zanim serwer potwierdzi zmianę. Pozwala to na szybszą percepcję responsywności aplikacji.
Wykorzystaj progressive disclosure z dyrektywą @defer do pokazywania treści w miarę jej dostępności, zamiast czekać na całą stronę.