Home

Guides

Editor

Components

Actions

Conditions

Components

Basic

Container

Text

Image

Icon

Button

Forms

Local State

Text Input

Date Picker

Logic

Conditional Logic

Conditional Switch Logic

Modal

Sheet

Pager

Tabbed Pager

Data

Data Loader

Repeating Item

Countdown Timer

Data Transformer

Date Elements

Paging Data Loader

Contentful

Rich Text

Data Loader Component Documentation

Overview

The Data Loader Component is designed to provide visual feedback to users during periods of data fetching, processing or any action that may take some time to complete. It enhances the user experience by indicating that a process is underway, preventing confusion and ensuring that users understand that their request is being handled.


Key Features

  • Animation Options

  • Customisable Appearance

  • Flexible Integration


Component Fields

1. Loader

2. Component

3. On Load Action

This field allows you to define the specific action that will occur when the data is loading. To set up the action, click on the field to display the action options and select the desired action from the list. Click here to learn more about Actions.

Advanced

4. Pull to refresh

5. Error type

6. Loader type

Preview

7. Display content


Best Practices for Using the Data Loader Component

  • Keep it Simple: Use minimalist designs to avoid overwhelming users, ensuring the loader does not detract from the overall user experience.

  • Consistent Usage:Apply the loader uniformly across the application to create a predictable experience for users when they encounter loading states.

  • Avoid Overuse: Use loaders only when necessary, ensuring they convey meaningful information about ongoing processes without being distracting.