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?