How to do Lazy loading in Lightning web components?
In this post we will talk about How to implement Infinity or lazy loading in Lightning Web Component using Lightning Datatable. Lazy loading helps you to load the data only when it is required. Infinite scrolling (enable-infinite-loading) enables you to load a subset of data and then load more data when users scroll to the end of the table.
Lazy loading is an optimization technique to load the content on-demand. Instead of loading the entire data and rendering it to the user in one go as in bulk loading, the concept of lazy loading helps in loading only the required section and delays the remaining until it is needed by the user while scrolling.
In this post we will learn about lightning datatable attributes enable-infinite-loading and load more offset.
- enable-infinite-loading : You can load a subset of data and then display more
when users scroll to the end of the table. Use with the onloadmore event handler to retrieve more data - load-more-offset : Determines when to trigger infinite loading based on how many pixels the table’s scroll position is from the bottom of the table. The default is 20
- onloadmore : The action triggered when infinite loading loads more data
public with sharing class LazyLoadingLWCController {
@AuraEnabled(cacheable=true)
public static List<Account> getAccounts(Integer limitSize, Integer offset){
List<Account> accountList = [SELECT Id,Name, AnnualRevenue
FROM Account
ORDER BY CreatedDate
LIMIT :limitSize
OFFSET :offset
];
return accountList;
}
}
<template>
<div style="height:500px">
<lightning-datatable key-field="Id"
data={accounts}
columns={columns}
enable-infinite-loading
onloadmore={loadMoreDataHandler}
hide-checkbox-column="true"
show-row-number-column="true">
</lightning-datatable>
</div>
</template>
To enable infinite scrolling, specify enable-infinite-loading and provide an event handler using onloadmore.
import { LightningElement, track, wire } from 'lwc';
import getAccounts from '@salesforce/apex/LazyLoadingLWCController.getAccounts';
const columns = [
{ label: 'Id', fieldName: 'Id', type: 'text' },
{ label: 'Name', fieldName: 'Name', type: 'text'},
{ label: 'Annual Revenue', fieldName: 'AnnualRevenue', type: 'text'}
];
export default class LazyLoadingLWC extends LightningElement {
accounts=[];
error;
columns = columns;
rowLimit =20;
rowOffSet=0;
connectedCallback() {
this.loadData();
}
loadData(){
return getAccounts({ limitSize: this.rowLimit , offset : this.rowOffSet })
.then(result => {
//Updating the accounts array from result as well apart from updating the updatedRecords variable
let updatedRecords = [...this.accounts, ...result];
this.accounts = updatedRecords;
this.error = undefined;
})
.catch(error => {
this.error = error;
this.accounts = undefined;
});
}
loadMoreDataHandler(event) {
const currentRecord = this.accounts;
const { target } = event;
target.isLoading = true;
this.rowOffSet = this.rowOffSet + this.rowLimit;
this.loadData()
.then(()=> {
target.isLoading = false;
});
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>56.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Peace ✌️