Showing a loading Spinner for my component but not during Init

The aura:waiting and aura:doneWaiting events are fired at the start/end of every Aura action, even ones you don't fire yourself. Unless your component is running in complete isolation (standalone Aura app outside of the Lightning platform), this is probably not what you want. Even if you manage to ignore the events during your components init, the container app may fire server-side actions in the background and trigger your event handlers.

Manually toggling the spinner is probably your best bet. There are multiple ways to reduce code duplication rather than copy/pasting the same helper method everywhere. One way is to create your own custom event to toggle the spinner. Then you just have to make sure you fire the toggle event at the correct places and the code to show/hide the spinner can be consolidated to one spot. Another option is to use component inheritance like @RedDevil suggested in the comments.


So here is how I currently see it and I may be wrong so please feel free to add an answer with a different take:

If your Spinner is in a main component and you want to show / hide it from any component in the application you would do the following:

Application Event

<aura:event type="APPLICATION" description="showSpinner">
</aura:event>

<aura:event type="APPLICATION" description="hideSpinner">
</aura:event>

Parent Component

....
<aura:handler event="c:showSpinner" action="{!c.showSpinner}"/>
<aura:handler event="c:hideSpinner" action="{!c.hideSpinner}"/>

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

Component Controllers

Show

$A.get("e.c:showSpinner").fire();

Hide

$A.get("e.c:hideSpinner").fire();

--

If your Spinner is in a component and you want to show / hide it locally (can be combined with above to have multiple spinners):

Component

<lightning:spinner aura:id="spinner" class="slds-hide" variant="brand" size="large"/>

Controller / Helper

Show

$A.util.removeClass(
      component.find('spinner'), 
      "slds-hide"
);

Hide

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

So which way you choose it depends on how, where, and when you want to show / hide the spinner.

Not sure I see the point of component inheritance (from the comments and answer above) or what value it would bring but would love to see an example