Github

Loading State

Loading states communicate that content is being prepared and help users understand the system is working.

Component variations

Default

Animated loading spinner with title and supporting description.

Title goes here

Nothing more exciting happening here in terms of content, but just filling up the space to make it look representative.

Without Description

Use concise title-only loading when extra context is unnecessary.

Loading

Usage Guidelines

Import

Import the loading state component in your module or standalone component:

import-loading-state.ts

Copy code

Basic Implementation

Use title and optional description to clarify what is being loaded.

my.component.html

Copy code

Minimal Text-Only

Use title-only text when compact feedback is needed.

my.component.html

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
title
string
-
Yes
Heading shown as the primary loading message
description
string
-
No
Optional supporting text below the title

Best Practices

When to Use

  • Use Loading State while asynchronous content is being fetched or processed.
  • Use concise messaging to set user expectations for wait time.

When Not to Use

  • Avoid using Loading State for empty data scenarios after loading is complete.
  • Avoid using it for errors; use alert or error-specific feedback instead.

Design Guidelines

  • Keep loading titles short and action-oriented.
  • Add description only when it adds useful context.
  • The loading spinner is always animated to communicate in-progress activity.
  • Ensure text remains readable and centered in available space.

Component playground

Customize the loading state props in this section

Title goes here

Nothing more exciting happening here in terms of content, but just filling up the space to make it look representative.

loading-state.component.html

Copy code