Using Lazy Loading in Galleries

Loading

Using Lazy Loading in Galleries in Power Apps

Introduction

When working with large datasets in Power Apps galleries, loading all records at once can cause slow performance, long load times, and unnecessary memory usage. Lazy loading is a technique that loads data in small chunks as needed, rather than all at once.

This guide will provide a step-by-step explanation of how to implement lazy loading in Power Apps galleries to improve performance and ensure a smooth user experience.


1. What is Lazy Loading?

1.1 Definition

Lazy loading is a technique that only loads a portion of the data initially and loads more records incrementally as the user interacts with the app.

1.2 Why Use Lazy Loading in Galleries?

πŸš€ Improves Performance β†’ Reduces initial data load time.
πŸ’Ύ Saves Memory β†’ Loads only what’s necessary instead of storing thousands of records.
πŸ”„ Enhances User Experience β†’ Faster app response and smooth scrolling.
πŸ“Š Avoids Delegation Issues β†’ Works well with large data sources like SharePoint, SQL, or Dataverse.


2. Implementing Lazy Loading in Power Apps Galleries

2.1 Load Only the First N Records on Start

Instead of loading all data at once, start with a limited set of records.

Step 1: Create a Collection with Initial Data

Use ClearCollect() to store a limited number of records in a collection when the screen loads.

ClearCollect(LazyLoadedData, FirstN(Orders, 50))

βœ… This loads only the first 50 records initially.

Step 2: Set the Gallery’s Items Property

Items = LazyLoadedData

βœ… The gallery will only display records stored in LazyLoadedData instead of fetching all data.


2.2 Load More Records on Scroll or Button Click

Once the user reaches the end of the gallery, load additional records dynamically.

Step 1: Add a “Load More” Button Below the Gallery

1️⃣ Insert a Button below the gallery.
2️⃣ Set the Text property to "Load More".
3️⃣ Set the OnSelect property to load more data.

Collect(LazyLoadedData, FirstN(Skip(Orders, CountRows(LazyLoadedData)), 50))

βœ… This adds 50 more records each time the user clicks the button.


2.3 Implementing Lazy Loading with Scrolling

Instead of using a button, automatically load more data when the user scrolls down.

Step 1: Create a Variable to Track Scrolling

  • Select the Gallery β†’ Set the OnVisible property:
Set(ScrollPosition, 0)
  • In the gallery’s OnScrollEnd property, load more data:
If(ScrollPosition < CountRows(LazyLoadedData),
   Collect(LazyLoadedData, FirstN(Skip(Orders, CountRows(LazyLoadedData)), 50))
)

βœ… This triggers data loading when the user scrolls to the bottom.


2.4 Using a Timer to Load Data Gradually

Instead of loading all data at once, use a Timer to load chunks of data periodically.

Step 1: Insert a Timer Control

1️⃣ Set the Duration property to 3000 (3 seconds).
2️⃣ Set Repeat to true.
3️⃣ Set the OnTimerEnd property:

If(CountRows(LazyLoadedData) < CountRows(Orders),
   Collect(LazyLoadedData, FirstN(Skip(Orders, CountRows(LazyLoadedData)), 50))
)

βœ… This automatically loads more data every 3 seconds while the user is on the screen.


2.5 Paginated Lazy Loading (With Next and Previous Buttons)

Instead of infinite scrolling, create a pagination system where users navigate page-by-page.

Step 1: Create a Page Number Variable

Set(CurrentPage, 1)

Step 2: Set Gallery Items to Show a Specific Page

Items = FirstN(Skip(Orders, (CurrentPage-1) * 50), 50)

βœ… Only displays records for the current page.

Step 3: Add “Next” and “Previous” Buttons

  • Next Button (OnSelect property):
Set(CurrentPage, CurrentPage + 1)
  • Previous Button (OnSelect property):
Set(CurrentPage, Max(1, CurrentPage - 1))

βœ… Users can navigate through pages without loading everything at once.


3. Best Practices for Lazy Loading in Power Apps Galleries

βœ… Always limit the initial data load β†’ Start with 50-100 records.
βœ… Use Skip() and FirstN() β†’ Load only the necessary records dynamically.
βœ… Use Collect() instead of ClearCollect() β†’ Keeps previously loaded data while adding new records.
βœ… Enable pagination or scrolling-based loading β†’ Avoid excessive memory usage.
βœ… Combine lazy loading with delegation β†’ Optimize for large data sources like SharePoint or SQL.
βœ… Monitor performance using CountRows() β†’ Ensure the app doesn’t load unnecessary records.


4. Conclusion

Lazy loading is a powerful technique to optimize Power Apps gallery performance. By loading data incrementally instead of all at once, you can create fast, efficient, and user-friendly apps. Implement scroll-based loading, paginated loading, or timer-based loading to ensure the best experience for users handling large datasets.

Would you like a specific implementation for SharePoint, SQL, or Dataverse?

Leave a Reply

Your email address will not be published. Required fields are marked *