> For the complete documentation index, see [llms.txt](https://bluebase.gitbook.io/core/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bluebase.gitbook.io/core/components/observers/dataobserver.md).

# DataObserver 📌

Observes data to check if it is data is loading, loaded or empty. The resulting flags are passed on to the children function. These flags may be used to show different UIs, i.e. loading state, empty state, etc.

{% hint style="info" %}

#### System Component 📌

This component is shipped with BlueBase Core.
{% endhint %}

## Usage

```jsx
<DataObserver data={dataObj} >
{
    ({data, loading, empty}) => {
        // Render UI based on params
    }
}
</DataObserver>
```

## Properties

| prop      | type                  | required | default | description                                                                                                                    |
| --------- | --------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------ |
| isLoading | (props) => boolean    | *no*     | -       | A function used to check if data is loading.                                                                                   |
| isEmpty   | (props) => boolean    | *no*     | -       | A function used to check if data is empty.                                                                                     |
| loading   | boolean               | *no*     | -       | Loading flag.                                                                                                                  |
| data      | any                   | *no*     | -       | Input data.                                                                                                                    |
| children  | ReactNode \| Function | *no*     | -       | Children, data is passed in the param object of the render prop function. This object is typed as `DataObserverChildrenProps`. |
| testID    | string                | *no*     | -       | Used to locate this view in end-to-end tests.                                                                                  |