2

I am using aura:iteration to dynamically render components and as the components are many, it is taking a bit of time. During this, I want to show spinner till all components are rendered, but as soon as the aura:iteration starts, screen freezes and we can't click anything, neither the spinner is shown. This gives a very bad impression of the application as till that end user don't know why nothing is happening.By the time the iteration is complete, spinner is hidden by my code.

markup:

<aura:attribute name="valuesList" type="String" />
<!--some code-->
    <aura:iteration var="fieldName" items="{!v.valuesList}">
                   <td >
                        <div class="slds-truncate">
                           <span>
                              <c:NewComponent name="{!fieldName}"/>
                           </span>
                        </div> 
                    </td>
     </aura:iteration>
<!--some code-->

This table is already rendered and I reset the "valuesList" in my controller to some new list as:

Controller:

helper.showSpinner(component);    //function to show spinner
component.set('v.valuesList', someNewList);
helper.hideSpinner(component);   //function to hide spinner

This will make the aura iteration to re-trigger and new values are displayed. But the spinner never is displayed. What could be the reason? Also I find aura:iteration very annoying, is there any other way to implement things that aura:iteration?

  • Did you change to $A.createComponent dynamic components or the aura:iteration? Using the aura:iteration but takes more time as you said screen freezes. can you tell me the workaround for this problem or suggestions – SFDC Feb 26 at 13:17
  • I don't remember what I did that time as this was long time back :). After working 2 years on lightning components : I think you can use aura:if with truth condition that do not render aura:iteration till the list is not empty. And in else part, show spinner. This way when list is populated asynchronously after some time, condition is toggled and aura:iteration is rendered with pre-filled list. In this case no need to show hide spinner from Javascript. – Sarang Feb 26 at 16:38
2

When you do component.set, it sets asynchronously the component attribute, so showSpinner and hideSpinner are already called when your aura:iteration is starting after the rerender provoked by the update of v.valueList value.

If you are bored by aura:iteration, you can dynamically create components with a loop from JS controller.

Use $A.createComponents method then add all created components in a blank DIV element.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_dynamic_cmp_async.htm

If you do that, your showSpinner and hideSpinner methods will work if you call showSpinner before calling $A.createComponents, then call hideSpinner in $A.createComponents callback

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.