0

The spinner i used is loading around 6 times, How to make it to load only once after all the methods are called and data is loaded on the Fields.

Component:

<aura:handler name="init"  value="{!this}" action="{!c.doInit}" />
<aura:attribute name="Provider" type="SysConct_Provider_detail__c" default="{
<aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
<aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
<aura:attribute name="Spinner" type="boolean" default="false"/>

<aura:attribute name="isOpen" type="boolean" default="false"/>
  <aura:if isTrue="{!v.Spinner}">
        <div aura:id="spinnerId" class="slds-spinner_container">
            <div class="slds-spinner--brand  slds-spinner slds-spinner--large slds-is-relative" role="alert">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
            </div>
        </div>
    </aura:if>

Controller.js : 

doInit : function(component, event, helper) {
    helper.doProvider(component);  //call provider details
},

    showSpinner: function(component, event, helper) 
{
    component.set("v.Spinner", true); 
},

hideSpinner : function(component,event,helper)
{
    component.set("v.Spinner", false);
},
Improve this question
2
  • 2
    As per documentation aura:waiting and aura:doneWaiting tags are deprecated. Please add more code so that we understand what exactly is missing. This is a simple use case where you need to set v.spinner to false in controller when all service calls are made or in afterRender file.
    – Sarang
    Commented Jul 9, 2019 at 6:20
  • @Sarang. updated the code, to paste the complete code it is of around 1300 lines each helper and controller , Am trying to update with useful lines.
    – raj blp
    Commented Jul 9, 2019 at 7:02

1 Answer 1

Reset to default
0

Assuming that doProvider is some service/apex call, here are 2 ways you can set the spinner on and off:

1. If spinner is toggled with respect to service call

Component

<!-- Keep it default true so that on load spinner is spinning -->

<aura:attribute name="Spinner" type="boolean" default="true"/>


<aura:if isTrue="{!v.Spinner}">
        <div aura:id="spinnerId" class="slds-spinner_container">
            <div class="slds-spinner--brand  slds-spinner slds-spinner--large slds-is-relative" role="alert">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
            </div>
        </div>
    </aura:if>

Controller/Helper

After response is received from service/apex, set this boolean to false.

component.set('v.spinner', false);

2. If spinner is toggled with respect DOM/elements rendering

Create Renderer file:

afterRender: function (component, helper) {
    this.superAfterRender();
    component.set('v.spinner', false);
},

Refer this documentation for details. Please update your question with any further query, I will refine this answer accordingly.

Improve this answer
2
  • ,After commenting init method in controller.js also the spinner is loading multiple times. And also i tried with your information but it doesn't work.
    – raj blp
    Commented Jul 9, 2019 at 9:39
  • @rajblp : As I said, please update more code so that problem definition is clear. You need to explain the logic that you are currently doing. If you want to wait till the service returns value, add the relevant code of service where you set this flag to false. If you want it after all elements are loaded, add the code that you wrote in renderer file alongwith the corrosponding markup. This would help us understand exact issue. The solution that I gave here is very generic and should always work, unless there is some specific scenario or syntax error.
    – Sarang
    Commented Jul 10, 2019 at 5:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .