infinite scrolling in lwc is repeating the record multiple times

Question

I am implementing custom activity timeline and trying to do custom infinite scrolling. The issue i am facing is while scrolling last fetched records are getting repeated multiple times and then stops. On scrolling lots of debug logs are also getting generated. I have tried using boolean variable in lwc javascript, but in that case it scrolls till June and then stops scrolling.

My Standard Timeline contains task till April

My Custom Timeline when doing scrolling this is happening below

April May is coming very below when the scrolling stops

JS -

connectedCallback() {

    getActivityTimeline({ recordId: this.rowdetails.idtoupdate, includeChildren: false, pageSize: this.rowLimit, pageNumber: this.pageNumber, lastActivityDate: null })
        .then(result => {
            console.log(result)
            this.timelineGroups = result.map((v, i) => ({ ...v, sectionName: `Section${i}`, isExpanded: true }));
            this.activeSections = this.timelineGroups.map((v) => v.sectionName);
        })
        .catch(error => {
            this.isLoaded = false;
            this.error = error;
            this.showToast(this.error, 'Error')
        });

}
 

onscroll function -

 handleScroll(event) {
        if (event.target.scrollTop > event.target.scrollHeight - (event.target.offsetHeight * 2)) {
            setTimeout(() => {
                this.fetchMoreActivityTimeLine();
            }, 1000);
        }
    }



 fetchMoreActivityTimeLine() {
        const currentData = this.timelineGroups;
        let ldate = currentData[currentData.length - 1].items[currentData[currentData.length - 1].items.length - 1];
        let vDate = JSON.parse(JSON.stringify(ldate)).activityDate;
        getActivityTimeline({ recordId: this.rowdetails.idtoupdate, includeChildren: false, pageSize: this.rowLimit, pageNumber: this.pageNumber, lastActivityDate: vDate })
            .then((data) => {
                this.fetchmoredata = data;
                console.log('Load data');
                if (data.length !== 0) {
                    this.timelineGroups = this.timelineGroups.concat(data);
                    console.log(this.timelineGroups);
                    console.log(this.timelineGroups.length);
                }
            }
            );
    }

Apex -

The SOQL which is running behind is below . I can't add all the apex as it is quite big one as i have use a wrapper to group those task , but this is the main soql

if(lastActivityDate !=null){    
    taskList = [SELECT Id, ActivityDate, Description, IsRecurrence, OwnerId, Owner.Name, Priority, Status, Subject, 
                           TaskSubtype, Type, WhatId, What.Name, WhoId, Who.Name
                           FROM Task
                           WHERE (WhatId IN: whatIdSet OR WhoId IN: whoIdSet)
                           AND ActivityDate < :Date.valueof(lastActivityDate) ORDER BY ActivityDate DESC NULLS LAST LIMIT 5]; 
    system.debug('taskList ' + taskList.size());
}else{
    taskList = [SELECT Id, ActivityDate, Description, IsRecurrence, OwnerId, Owner.Name, Priority, Status, Subject, 
                           TaskSubtype, Type, WhatId, What.Name, WhoId, Who.Name
                           FROM Task
                           WHERE (WhatId IN: whatIdSet OR WhoId IN: whoIdSet)
                           ORDER BY ActivityDate DESC NULLS LAST LIMIT 5];
    system.debug('taskList ' + taskList.size());
}

Answer 1

Your JavaScript is queuing up multiple callbacks, which all then fire using the same data, because the .then method is asynchronous, so it won't get a chance to see the new data until potentially many callbacks have occurred. Make sure you're debouncing your timer:

_timerId;
handleScroll(event) {
    if (event.target.scrollTop > event.target.scrollHeight - (event.target.offsetHeight * 2)) {
        clearTimeout(this._timerId);
        this._timerId = setTimeout(() => {
            this.fetchMoreActivityTimeLine();
        }, 1000);
    }
}