Infinite Datatable Salesforce LWC

Cotroller class

public with sharing class infiniteLoadController {

    @AuraEnabled(cacheable=true)
    public static List<Lead> loadDataById(){
        try {
            return [Select Id, Name, Status, CreatedDate from Lead 
                order by CreatedDate DESC limit 20
            ];

        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }

    @AuraEnabled(cacheable=true)
    public static List<Lead> loadMoreData(String lastName, String lastId){
        try {
            return [Select Id, Name, Status, CreatedDate from Lead 
                where (Name > :lastName) OR (Name = :lastName AND Id > :lastId)
                order by Name limit 20 
            ];
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }

    @AuraEnabled(cacheable=true)
    public static Integer countOfLeads(){
        try {
            AggregateResult agr = [Select count(Id) recordCount from Lead];
            return (Integer)agr.get('recordCount');
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }


}

Javascript file

import { LightningElement } from 'lwc';
import loadDataById from "@salesforce/apex/infiniteLoadController.loadDataById";
import loadMoreData from "@salesforce/apex/infiniteLoadController.loadMoreData";
import countOfLeads from "@salesforce/apex/infiniteLoadController.countOfLeads";

const columns = [
    { label: 'Name', fieldName: 'Name' },
    { label: 'Status', fieldName: 'Status' },
    { label: 'CreatedDate', fieldName: 'CreatedDate', type: 'date' },
];

export default class InfiniteLoadDatatable extends LightningElement {
    data = [];
    columns = columns;
    totalRecords = 0;
    recordLoaded = 0;

    //Lifecycel methods below
    connectedCallback() //like jquery ready
    {
        this.loadData();
    }

    async loadData()
    {   
        try{
            this.totalRecords = await countOfLeads(); 
            this.data = await loadDataById();
            this.recordLoaded = this.data.length;
        }catch(error)
        {
            console.log("Error while loading", error);
        }
    }

    async loadMoreData(event)
    {
        try{
            const {target} = event; //array destructuing
            target.isLoading = true; //spinner start
            let currentRecords = this.data;
            let lastRecord = currentRecords[currentRecords.length - 1];
            let newRecords = await loadMoreData({
                lastName: lastRecord.Name,
                lastId: lastRecord.Id
            }); //param passig for imperative Apex

            this.data = [...currentRecords, ...newRecords]; //spread op
            this.recordLoaded = this.data.length;
            target.isLoading = false; //spinner stop
        }catch(error)
        {
            console.log("Error while loading", error);
        }
    }
}

html file

<template>
    <div style="height: 300px;">
        <div class="slds-page-header">
            <div class="slds-page-header__row">
                <div class="slds-page-header__col-title">
                    <div class="slds-media">
                        <div class="slds-media__figure">
                        <span class="slds-icon_container slds-icon-standard-opportunity" title="opportunity">
                            <lightning-icon icon-name="standard:lead" class="slds-icon slds-page-header__icon"></lightning-icon>
                            <span class="slds-assistive-text">lead</span>
                        </span>
                        </div>
                        <div class="slds-media__body">
                        <div class="slds-page-header__name">
                            <div class="slds-page-header__name-title">
                                <h1>
                                    <span class="slds-page-header__title slds-truncate" title="Load Lead Using Infinite Loading">Load Lead Using Infinite Loading</span>
                                </h1>
                            </div>
                        </div>
                            <p class="slds-page-header__name-meta">Total Records {totalRecords} Records Loaded {recordLoaded}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <lightning-datatable key-field="Id" data={data} columns={columns} enable-infinite-loading onloadmore={loadMoreData} hide-checkbox-column="true" show-row-number-column="true">
        </lightning-datatable>
    </div>
</template>

Implementation image: