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

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

State	Content type	Loader type
Loading the app	Unpredictable	Spinner
Loading page template	Predictable	Skeleton
Making API calls	Data can be empty	Spinner
Making API calls	Data will always be present	Skeleton
Searching	Data can be empty	Spinner
Changing page	Data will always be present	Skeleton

Empty state shows that there is no data to display. Such states can be utilized to educate users about the kind of content they can expect along with the next steps that they can take.

Note: Please refer these comprehensive guidelines about empty states.

This state occurs when the page is accessed for the first time, hence has no data to display. It should convey what users can expect once data is available, while providing constructive guidance about next steps.

Note: In such scenarios, a primary call to action can be used, provided there is no other primary call to action on the page.

UI state for no data

These empty states occur as consequences of user-initiated actions:

This state indicates that there are no search results and provides guidance on modifying search terms to proceed with the search.

UI State for no search results

This state indicates the absence of results based on applied filter values and guides users on adjusting the filters to continue.

UI State for no filter results

Error states are shown when things don’t go as expected, this could be due to system failure, bad internet, the user trying to perform actions that they don’t have access to, etc.

Users should be provided with a succinct yet descriptive message along with an action to resolve these error states.

Following are some of the common error types:

This state shows up when there are problems in fetching data from the system.

Error while fetching data

This state shows up when the requested page does not exist anymore.

Page doesn’t exist

Error state to convey the lost internet connection.

Error state while opening a new page or navigating to some other links.

Note: The UI state should go away as soon as either the user click “Try Again” or the system is back online.

Error while opening a new page with no internet connection

For cases when users try to perform any action on the page having no internet, a prompt should be given stating the reason of the failure.

Note: The prompt will not go away until the system is back online.

Error while taking action on the page with no internet connection

This state shows up when the server is unable to handle the request due to temporary overload.

UI state when server is unavailable

This state shows up when the user does not have the access to view the requested content.

Error while viewing the restricted content

System throws this error whenever there is a lot of delay in the response of a particular request.

Error to show request timeout