Lazy Data Loading
- Lazy loading helps with loading only the necessary piece and delaying the loading of the remaining until the user needs it, as opposed to bulk loading, which loads all of the data and renders it to the user at once.
- Attributes:
- Using the enable-infinite-loading option, you can load a portion of the data and then display more as viewers scroll to the table's finish. To retrieve extra data, use the onloadmore event handler.
- load-more-offset: Calculates the number of pixels the table's scroll position is from the bottom of the table to determine when to start infinite loading. 20 is the default.
- Visit Salesforce Document Link to understand more about Lightning data Table https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation
Implementing Lazy Data Load for contact
public with sharing class LazyLoadingController {
@AuraEnabled(cacheable=true)
public static List<Contact> getContact(Integer limitSize, Integer offset){
List<Contact> contactList = [SELECT Id,Name
FROM Contact
ORDER BY CreatedDate
LIMIT :limitSize
OFFSET :offset
];
return contactList;
}
}
lazyLoadingLWCDemo
<template>
<div style="height:500px">
<lightning-datatable key-field="Id"
data={contacts}
columns={columns}
enable-infinite-loading
onloadmore={loadMoreData}
hide-checkbox-column="true"
show-row-number-column="true">
</lightning-datatable>
</div>
</template>
lazyLoadingLWCDemo,js
import { LightningElement} from 'lwc';
import getContact from '@salesforce/apex/LazyLoadingController.getContact';
const columns = [
{ label: 'Id', fieldName: 'Id', type: 'text' },
{ label: 'Name', fieldName: 'Name', type: 'text'}
];
export default class LazyLoadingLWCDemo extends LightningElement {
contacts=[];
error;
columns = columns;
rowLimit =25;
rowOffSet=0;
connectedCallback() {
this.loadData();
}
loadData(){
return getContact({ limitSize: this.rowLimit , offset : this.rowOffSet })
.then(result => {
let updatedRecords = [...this.contacts, ...result];
this.contacts = updatedRecords;
this.error = undefined;
})
.catch(error => {
this.error = error;
this.contacts = undefined;
});
}
loadMoreData(event) {
const currentRecord = this.contacts;
const { target } = event;
target.isLoading = true;
this.rowOffSet = this.rowOffSet + this.rowLimit;
this.loadData()
.then(()=> {
target.isLoading = false;
});
}
}
XML
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
