0

I am trying add Spinner in to my Lightning component and it is not working as expected. Below is what I tried when the button is clicked it needs to shows the spinner and disable the spinner once the click even is completed.

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global"  >

 <lightning:recordEditForm aura:id="form" 
        objectApiName="Case" 
        recordId="{!v.recordId}"
        onsubmit="{!c.handleSubmit}"
        onerror="{!c.handleError}"
        onsuccess="{!c.handleSuccess}">
         <!--<lightning:spinner aura:id="spinner" variant="brand" /> -->
        <lightning:inputField aura:id="statusInput" fieldName="Status" class="slds-hide" />
        <lightning:button variant="brand" type="submit" label="Close Case(LDS)" />
 </lightning:recordEditForm>    

    <div class="exampleHolder">
        <aura:if isTrue="{! v.loaded }">
            <aura:set attribute="else">
                <lightning:spinner alternativeText="Loading" />
            </aura:set>
        </aura:if>
    </div>

</aura:component>

Controller

({
    handleSubmit: function(component, event, helper) {
        component.set('v.loaded', component.get('v.loaded'));
        event.preventDefault();      
        var fields = event.getParam('fields');
        fields.Status = 'Closed';
        console.log(JSON.stringify(fields)); 
        component.find('form').submit(fields); 
        
    },
    
    handleError: function(component, event, helper) {
        component.set('v.loaded', !component.get('v.loaded'));
        $A.get("e.force:showToast")
        .setParams({
            type: 'error',
            mode: 'pester',
            message: 'Case cannot be closed, please verify the required fields like Category are filled !!' }).fire();  
    },
    
    handleSuccess: function(component, event, helper) {
        component.set('v.loaded', !component.get('v.loaded'));
            $A.get("e.force:showToast")
            .setParams({
            type: 'success',
            message: 'Case is closed!',
            mode: 'pester'
            })
        .fire();
    }
})

I was hoping the spinner will be shown when the button is clicked until the toast of success/error is fired. But it shows on the page load itself like below

enter image description here

Can anyone help me what I am missing here

1

looking at the markup and js controller it seems like you have not actually set the value of 'loaded' attribute anywhere. Because the default value is false for the loaded attribute, that's why you are seeing it on the page load. So, This can be resolved using two approaches, if we go with the current one then the loaded attribute should have a default value true and then you have to explicitly set the value of attribute as true or false when your button event gets fired --> component.set('v.loaded',false) and when you are done with the processing update the loaded attribute again --> component.set('v.loaded',true).

I suggest instead of using aura:if, you can use spinner out of the recordEditForm component and use slds classes to display or hide the spinner: here keeping the default value for loaded as false

<aura:attribute name="loaded" type="Boolean" default="false" />
<<lightning:spinner variant="brand" alternativeText="Loading..." class="{!(v.loaded? 'slds-show': 'slds-hide')}" />>
<lightning:recordEditForm aura:id="form" > ....</lightning:recordEditForm>

so just update the values of loaded attribute to true or false depending upon the operation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.