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

Paging Data Loader Component Documentation

Overview

The Paged Loader Component is designed to efficiently manage and display large sets of data across multiple pages. It provides a loading indicator that informs users while data is being fetched for the current page, ensuring a smooth user experience during transitions between data sets.


Key Features

  • Dynamic Pagination

  • Loading Indicators

  • Customisable Page Size


Component Fields

1. Loader

2. Path

3. Load More Condition

This field allows you to define the specific condition that will occur. To set up the condition, click on the field to display the condition options and select the desired condition from the list. Click here to learn more about Conditions.

4. Header

5. Component

6. Empty

Advanced

7. Pull to refresh

8. Error type

9. Loader type


Best Practices for Using the Paging Data Loader Component

  • Efficient Data Fetching:Implement techniques like lazy loading or API calls that only fetch data for the current page to minimise bandwidth usage and improve loading times.

  • User Experience:Provide clear navigation cues and loading indicators to guide users, enhancing their understanding of the loading process and available actions.

  • Test Across Scenarios: Test the component with various data sizes and pagination settings to ensure it performs well under different conditions, including empty states and large datasets.