Implement Robust Angular UI Patterns

This skill codifies modern Angular UI patterns for loading states, error handling, and data display, built around five core principles: never show stale UI, always surface errors, use optimistic updates so the UI feels instant, use @defer for progressive disclosure, and prefer graceful degradation (partial data over no data) over an all-or-nothing view. Its golden rule for loading states is to show a loading indicator only when there is no data to display yet - demonstrated with a component that branches on error, then loading-with-no-items, then empty, then the populated list - plus a decision tree and a skeleton-vs-spinner table (skeletons for known content shapes like lists/cards on initial load, spinners for unknown-shape or inline operations like modals and button submissions). It shows Angular's modern control-flow syntax in practice: @if/@else for conditional rendering, @for/@track/@empty for lists with a built-in empty-state block, and @defer (with @placeholder, @loading (minimum 200ms), and @error sub-blocks) for deferring non-critical content like comments until it enters the viewport. For error handling, it defines a four-level hierarchy (inline field-level errors, toast notifications for recoverable errors, page-level error banners when data is still partially usable, and full error screens for unrecoverable failures) and is emphatic that errors must never be silently swallowed, contrasting a correct pattern (catch, log, and show a toast) against a wrong one (catch and only console.error, leaving the user unaware). It covers button states (disabling triggers during async operations and showing an inline spinner, using a saving signal set/reset in a try/finally block) to prevent duplicate submissions, contextual empty-state and confirmation-dialog component patterns, and a full reactive form example combining FormBuilder validators, field-level error messages, and a submitting-state-guarded submit handler. It closes with explicit anti-pattern comparisons (loading spinner shown even when data already exists and causes a refetch flash; errors logged but not surfaced; submit buttons that aren't disabled during submission) and a pre-completion UI-state checklist covering error/loading/empty states, button disabling and feedback, optimistic-update rollback, and accessibility (loading states announced to screen readers, errors linked to form fields, focus management after state changes).

Use this skill when building Angular UI components, handling asynchronous data fetching, or managing component states (loading, error, empty, success) - especially list/collection views, forms, and button-triggered async actions. It is not a state-management or testing guide itself - it explicitly points to companion skills (angular-state-management for Signal stores, angular for broader modern patterns, testing-patterns for testing all UI states) rather than covering those in depth here.

Input is an Angular component's async data source (a Signal-based store or service) and its loading/error/data states. Output is component templates and TypeScript following the loading/error/empty/button-state patterns described - conditional rendering blocks, error-state and empty-state components, and guarded async handlers - ready to drop into a component.

Built for Angular's modern template syntax (@if, @for, @defer) and Signals (signal, input, output), and designed to compose with the angular-state-management, angular, and testing-patterns skills.

@if (loading() && !items().length) {
  <app-spinner />
}

Angular developers building UI components that handle asynchronous data - lists, forms, and button-triggered actions - who want consistent, tested patterns for loading, error, and empty states instead of ad hoc handling per component.