angular-ui-patterns

Show a loading indicator only when there is no data to display, using the pattern `@else if (loading() && !items().length)`. This prevents spinner flashes when refetching data that is already rendered on screen.

Use skeletons when the content shape is known, such as list or card layouts and initial page loads. Use spinners for unknown content shapes, modal actions, button submissions, and inline operations.

The `@defer` block renders non-critical content lazily, triggered by conditions like `on viewport`. It supports `@placeholder`, `@loading` with minimum durations, and `@error` fallback blocks for graceful progressive disclosure.

Use the `@empty` block inside `@for` loops to render an empty state component when the collection has no items. Every list should include an empty state with an icon, title, description, and optional action button.

Disabling buttons during async operations prevents duplicate submissions from repeated clicks. Combine the disabled binding with a loading spinner and a signal flag that resets in a finally block after the operation completes.

Use inline errors for field-level validation, toast notifications for recoverable errors, error banners for page-level issues with partially usable data, and full error screens for unrecoverable failures. Never catch errors silently without user feedback.