I have over 2000 checkboxes in my lightning component and the componet loads within 6 seconds. However when saving Salesforce Lightning crawls and takes a minute on my machine to save and for our QA Tester it is taking over two minutes to save. The back end is only taking 300 milliseconds.

Here is the log for the front end:

JSON.stringify: 257.11669921875ms

FRCElementMatrixComponent.js:246 JSON.parse: 26.737060546875ms

FRCElementMatrixComponent.js:261 filter: 4.0048828125ms

FRCElementMatrixComponent.js:278 clear v.elements: 4213.22509765625ms

FRCElementMatrixComponent.js:287 saveAction: 32226.1650390625ms

FRCElementMatrixComponent.js:331 loadElementMatrixData: 12743.0830078125ms

Here is the code for the controller:

var saveAction = component.get("c.saveElements"); 

var allJson = JSON.stringify(component.get("v.elements"));

var allObj = JSON.parse(allJson);

//Only save elements that are enabled and that have changed
function checkElement(element) {
    if (element.checkboxDisabled)
        return false;
    if (element.IsGroupRow)
        return false;

    return element.Renovated != element.RenovatedOriginal;

var onlyEnabledObj = allObj.filter(checkElement);
var onlyEnabledJson = JSON.stringify(onlyEnabledObj);

//Clear everything because it results in less save time
allJson = null;
allObj = null;        

console.time('clear v.elements');
component.set("v.elements", []); 
console.timeEnd('clear v.elements');

    accountId : component.get("v.recordId"),
    elementsJson : onlyEnabledJson

saveAction.setCallback(this, function(a) {
    if (a.getState() === "SUCCESS") {
        //We have to load after we save to re-calculate everything
        var loadAfterSaveAction = component.get('c.doLoadAfterSave');
    } else if (a.getState() === "ERROR") {
        $A.log("Errors", a.getError());


Here is the UI for a normal element checkbox, not at the Area or Good Type level:

<!-- Normal Element Checkbox -->
<aura:If isTrue="{#and(!element.IsGroupRow, element.CheckboxDisabled)}">
    <div class="elementPeriod" data-columnType="{#element.RenovationStatus}" data-groupId="{#element.GoodType}" data-areaId="{#element.Area}">
        <ui:outputCheckbox aura:id="elementCheckboxDisabled" value="{#element.Renovated}" />
<aura:If isTrue="{#and(!element.IsGroupRow, !element.CheckboxDisabled)}">
    <div class="elementPeriod" data-columnType="{#element.RenovationStatus}" data-groupId="{#element.GoodType}" data-areaId="{#element.Area}">
        <!-- The hidden id is inside the class name since we are already using the id and name for grouping -->
        <ui:inputCheckbox aura:id="elementCheckbox" class="{#element.HiddenId}" name="{#element.GroupId}" value="{#element.Renovated}" click="{!c.handleCheckboxClick}"  />                     

Here is what the UI looks like: Renovation

  • Showing 2000 checkboxes on a single page begs to have this moved from the client to the server. Consider pagination or some sort of infinite loading solution (which lightning:datatable is already prepped for infinite loading) May 1, 2019 at 14:10
  • The problem is not with the loading but with the saving. Maybe there is some way to disable lightning for a div before the save? May 1, 2019 at 14:23
  • The user can also expand at any level of grouping and do a Select All for an area or good type. kellermanstores.com/downloads/StackOverflow/Renovation.png May 1, 2019 at 14:30
  • If you have binded variables, that would definitely be causing an issue for you. Ex: {! v.myVariable} is binded and will "stay up to date" as the values adjust on it - this is very expensive. Using {# v.myVariable} is much lighter. Read more here May 1, 2019 at 14:31
  • Is this a Visualforce Page or Lightning Aura Component that you're using? I would update your post with the answer to this :-) May 1, 2019 at 14:32


You must log in to answer this question.

Browse other questions tagged .