Display spinner in specific component only

Question

I added lightning component to the page layout but when I fire spinner it displays for all components:

Also I have two components with aura:id to use component.find() in doInit function. That is the reason why I can't create container div (.find() doesn't work in this case). What is the best way to display spinner in my component only?

Answer 1

Try to do it with some CSS changes and change use unique aura:id for both Do something like this ..

Component

<aura:attribute name="isLoading" type="Boolean" default="true" />
<aura:if isTrue="{!v.isLoading}">
   <div class="slds-p-horizontal--small slds-size--1-of-1">
      <div class="slds-p-horizontal--small slds-size--1-of-1 isActivityLoading">
        <lightning:spinner variant="brand" size="small"/>
      </div>   
   </div>
   <aura:set attribute="else">
      //Else show other data     
   </aura:set>
</aura:if>

CSS

.THIS .isActivityLoading .slds-spinner_container {
   position: relative !important;
   top: 20px !important;
}

Controller

doInit : function(component, event, helper) {
    //Getting Data
    var action = component.get("c.yourAction");
    action.setCallback(this,function(response){
        if (response.getState() === "SUCCESS"){
           component.set("{!v.isLoading}", false);
        }
    });
    $A.enqueueAction(action);

},