UI states

UI states are used to inform users about the various states a page or container can be.

Usage
Code

UI states are used to inform users about the various states a page or container can be. There can be 4 possible states for a typical workflow:

  1. Loading states
  2. Content placeholders
  3. Error states
  4. Empty states

Principles

  • Load progressively.
  • Skeleton over spinner.
  • Show a progress bar if loading takes more than 1s.
  • If the content or data may be empty after loading, use a spinner.
  • Avoid flicker (showing an element and then removing it).
  • Loading state

    A typical process starts with loading the app first. If we go step by step -

    StateContent typeLoader type
    Loading the appUnpredictableSpinner
    Loading page templatePredictableSkeleton
    Making API callsData can be emptySpinner
    Making API callsData will always be presentSkeleton
    SearchingData can be emptySpinner
    Changing pageData will always be presentSkeleton

    Examples

    Loading the app

    Loading the app

    Loading the page template

    Loading the page template

    Making API calls - Data can be empty

    Making API calls where data can be empty

    Making API calls - Data cannot be empty

    Making API calls where data cannot be empty

    Searching - Data can be empty

    Searching where data can be empty

    Pagination - Data cannot be empty

    Pagination where data cannot be empty

    Empty and Error States



    StateContentCard
    No content availableBlank screen with illustration
    Educate the content about this module
    Call to action (Create, search, etc)
    No
    No search resultsNo results illustrationYes, if previously present
    Error (page not loaded)Blank screen with error illustration
    Retry button
    No
    Error (search/filter/pagination)Toast with the error message and 'Try again' actionYes, if previously present


    Examples

    No content available

    Manage your outreach campaigns

    Campaigns let you reach out to patients with text messages, emails and voice calls

    PropertyValue(s)Default value
    IllustrationImage

    Image size
    Height - 128px
    Width - Dynamic as per the height, maintaining the aspect ratio
    -
    Title<title>We didn't find a match
    Description<description>Try adjusting your search to find what you are looking for.
    ButtonLabelTry again


    No search results

    We didn't find a match

    Try adjusting your search to find what you are looking for.

    PropertyValue(s)Default value
    IllustrationImage

    Image size
    Height - 256px
    Width - Dynamic as per the height, maintaining the aspect ratio
    -
    Title<title>Manage your outreach camaigns
    Description<description>Campaigns let you reach out to patients with messages, emails and voice calls.
    ButtonLabelNew campaign


    Error (page not loaded)

    There's a problem loading this page.

    A technical problem is preventing the page from loading. Try reloading this page.

    Error (search/filter/pagination)

    Error for search/filter/pagination


    Flowchart

    Flowchart for a typical UI state


    Was this page helpful?