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>

MASTER CLASS

Salesforce

Wednesday 8 February 2023

Lazy Data Loading