Stuck with Duplicates on InfiniteLoading using aura:lighting:datatable

Question

I am trying to get the lightning:datatable running but I am getting duplicates when on 'Load more', on scrolling. The initial load is fine but only the scrollbar is bringing loads of duplicates which vary on every run. I have fixed the height and width of the component and trying to control when to stop loading using the following code.The search happens on a button click, I have not copied the whole code for brevity and the initial load(of 10 records) runs fine.

Helper: The resolve on this code is not returning back to the controller. The controller's code runs a couple of times and then the helper code runs a few times. Since the Controller would not be aware of the data loaded from the helper, the data load is repeating

  loadData : function(component){
    return new Promise($A.getCallback(function(resolve){
        var limit = component.get("v.initialRows");
        var offset = component.get("v.currentCount");
        var action = component.get("c.searchList");
        action.setParams({
            "offsetRange" : offset,
            "limitRows": 10,
             });
        action.setCallback(this,function(response){
            var state = response.getState();
            var ret = response.getReturnValue();
            resolve(ret);
            var currentCount = component.get("v.currentCount");
            currentCount += component.get("v.initialRows"); 
            component.set("v.currentCount",currentCount);
        });
        $A.enqueueAction(action);
    }));
},

Controller:

   loadMoreData : function(component, event, helper) {
        if(!(component.get("v.currentCount") >= 21))
        {
            helper.loadData(component).then(function(data){ 
            var currentData = component.get("v.uoList");
            var newData = currentData.concat(data);
            component.set("v.uoList", newData);
            });
        }
        else
        {
            component.set('v.enableInfiniteLoading', false);
        }
},

Component:

<aura:component implements="force:appHostable" controller="appAddCourseCC">
<aura:attribute type="UnitO__c[]" name="uoList"/>
<aura:attribute name="initialRows" type="Integer" default="10"/>
<aura:attribute name="currentCount" type="Integer" default="10"/>
<aura:attribute name="totalRows" type="Integer" default="0"/>
<aura:attribute name="loadOffset" type="Integer" default="1"/>
<aura:attribute name="enableInfiniteLoading" type="Boolean" default="true"/>
  <div  style="width:840px;height:500px;">
  <lightning:datatable data="{!v.uoList}" aura:id="table1"
                                            columns="{!v.mycolumns}" 
                                            keyField="id"
                                            class="table-test"
                                            column-widths-mode="fixed"
                                            hideCheckboxColumn="true"                                            
                                            loadMoreOffset="{!v.loadOffset}"
                                            enableInfiniteLoading="{!v.enableInfiniteLoading}"
                                            onloadmore="{!c.loadMoreData}"/>
</div>
</aura:component>

Answer 1

I think what you potentially need is a variable to track the callout state i.e. before enqueuing the action for loadmore, check if previous loadmore call has returned.

If you see the example in SF library, this is done by flipping isLoading by event.getSource().set("v.isLoading", false);

Is that included in your complete code? https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/example#lightningcomponentdemo:exampleDatatableInfiniteLoading