angular-ui-patterns
Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.
How to use
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ę.