> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# CMS UI States: Success, Loading, Error, Empty

**Dynamic elements such as CMS Lists or Items have different states such as loading or error, all of which are completely customizable.**

|    |    |    |
| --- | --- | --- |
| [1. Types of UI States](#2-types-of-ui-states) | [2. How to switch UI States](#2-how-to-switch-ui-states) | [3. How to edit UI States](#2-how-to-edit-ui-states) |

## Types of UI States

Let’s go over all of the CMS states you will encounter in a dynamic project:

* **Success** - the default state, it displays the data from the CMS when elements and data are correctly bound
* **Error** - displays when there the data is incorrectly bound or there are connectivity issues
* **Loading** - displays while the data from the CMS is being pulled from the CMS
* **Empty** - displays when the data you want to pull exists but the fields are empty

## How to switch UI States

To switch between different states to customize or preview the content within:

* **Select the CMS element** you’re working on ( [Item](/en/article/how-to-use-the-cms-item-element-1hiskvj/), [List](/en/article/how-to-use-the-cms-list-element-i44ff1/) or Array mapper)
* Go to the **Right panel -> Collection settings**
* In the **UI state** section **check Override state**
* From the new dropdown menu **select one of the UI states** available

![How to preview and switch CMS states](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/1-cms-states_qyw8hp.gif)

## How to edit UI States

The UI states of a CMS element are practically uneditable fragments that are displayed in different circumstances, and to which containers and elements can be added.

After switching to the UI state you want to work on, to add content to it:

* Go to the **Left panel - Layers and Files** tab
* In the Layers panel **under the main CMS element** select the UI state you want: **Success, Error or Loading**
* From the Left panel -> Elements **drag and drop any container or element you want** to add to the canvas or in the correct state container
* Edit the elements you want to add from the **Right panel **

![How to edit the different states of CMS elements](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/2-cms-states_15d29wk.gif)