5

I'm having a big table filled with custom cell components and after changing a cell, the table gets re-rendered.

dataChanged: function(cmp, evt, helper) {
    var table = cmp.get("v.data");

    helper.updateSummaries(table);

    cmp.set("v.data", table);
},

helper.updateSummaries(table); works within a few milliseconds, but cmp.set("v.data", table); and the re-rendering behind it, takes a couple seconds. I want to display a spinner, because the UI is just blocked with no feedback for the user. The lightning bundle seems to re-render it's components but there are no events before or after this. So I can't handle it.

The chrome inspector does not show any lightning events during the 5 seconds of reloading. enter image description here

This is what I tried so far, none of them worked:

<aura:handler name="render" value="{!this}" action="{!c.startWaiting}" />
<aura:handler event="aura:doneRendering" action="{!c.stopWaiting}" />
<aura:handler event="aura:waiting" action="{!c.startWaiting}"/>
<aura:handler event="aura:doneWaiting" action="{!c.stopWaiting}"/>

What can I do here for a good user experience?

3 Answers 3

4

I reproduced your code and found its not a problem with the events. They get perfectly fired.

The root cause to me instead seems to be the use of $A.util.toggleClass(spinner, 'slds-hide') to show/hide the spinner. As the docs mention here https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_styles.htm

If the utility function is not used inside afterRender() or rerender(), passing in cmp.getElement() might result in your class not being applied when the components are rerendered. For more information, see Events Fired During the Rendering Lifecycle.

2
  • 1
    Thanks for the answer, but this is not the case here, I am passing a component reference as console.error(cmp.find("loading").toString()); tells me: SecureComponentRef: markup://lightning:spinner {177:0} {loading}{ key: {"namespace":"MY_NS"} }
    – Basti
    Oct 4, 2017 at 9:25
  • 1
    thanks for pointing this out, it did not resolve it, but brougth me closer to the root cause: $A.util.removeClass happens seconds after execution
    – Basti
    Oct 4, 2017 at 10:33
0

You can define an application level event fired by the component based on calling the dataChanged function or more specifically, on calling the updateSummaries helper. When that event fires, you could use it to trigger your spinner.

There are other methods too, but that's what comes to mind off hand. I know there are specific methods to cause a manual rerender, but I don't have my references at hand at the moment to share them with you.

2
  • sure, enabling the spinner is easy, but there is nothing, that tells me that lightning is done with rendering after calling cmp.set("v.data", table); so I don't know when to disable the spinner. not sure why aura:doneRendering isn't doing this job.
    – Basti
    Sep 29, 2017 at 13:01
  • Ahh! I didn't get from the phrasing of your question that the issue you were having was when to stop the spinner. Is that what you're saying?
    – crmprogdev
    Sep 29, 2017 at 13:46
0

After a more specific Question thanks to Charles T we finally have an answer for this. The problem is the Lightning Lifecycle. We need to break out and safe the data async, so Lightning won't prevent us from changing UI stuff:

dataChanged: function(cmp, evt, helper) {
    $A.util.removeClass(cmp.find("spinner"), 'slds-hide');

    window.setTimeout(
        $A.getCallback(function() {
            var table = cmp.get("v.data");
            helper.updateTable(table, cmp);
            cmp.set("v.data", table);

            $A.util.addClass(cmp.find("spinner"), 'slds-hide');
        }), 0
    );
},

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.