[SalesForce] lightning:recordViewForm add spinner while loading data

I'm using lightning:recordViewForm and I realized that there is a bit delay.
I was reading a lot here and in google but can't find any solution to this.

I thought on adding a spinner on my component just to be a little bit user friendly meanwhile data is loading.

Do you have any idea to implement it?

<lightning:recordViewForm aura:id="auraID"
                                  recordId="{!v.recordId}"
                                  objectApiName="Object__c" 
                                  density="comfy" >
            <div class="slds-grid slds-wrap">
                <div class="slds-col slds-size_3-of-12">
                    <lightning:outputField variant="label-stacked" fieldName="any_field"/>
                </div>
                <div class="slds-col slds-size_3-of-12">
                    <lightning:outputField variant="label-stacked" fieldName="Tother__c"/>
                </div>

                <div class="slds-col slds-size_6-of-12">
                    <lightning:outputField variant="label-stacked" fieldName="thelast__c"/>
                </div>
            </div>
        </lightning:recordViewForm>

Best Answer

For this purpose, you will need onload event. But this event is not available on recordViewForm - you can instead use recordEditForm.

Here is the sample code:

<lightning:spinner aura:id="spinner" variant="brand" />

<lightning:recordEditForm recordId="{!v.recordId}" 
                          objectApiName="Account"
                          onload="{!c.handleLoad}">
    <lightning:messages />
    <lightning:outputField fieldName="Name" />
</lightning:recordEditForm>

controller.js:

handleLoad : function(component, event, helper){
    $A.util.addClass(component.find("spinner"), "slds-hide");    
},
Related Topic