Esta es la forma más “elegante” que he encontrado, para mostrar/ocultar el gif del spinner.
Necesitaremos lo siguiente:
- Handler mediante el evento aura:waiting y aura:doneWaiting
- Una función en el controller que sea invocada por aura:waiting y otra que sea invocada por aura:doneWaiting
- Condicional aura:if, para mostrar o ocular el spinner
- Los tags (div y span) con sus respectivas clases (slds-spinner…) para desplegar el spinner
- El else (aura:set attribute=”else”), de la condicional de aura:if
En el siguiente ejemplo, al cargar el componente se muestra un botón Guardar, al dar clic en el botón, entra en acción el evento aura:waiting, que manda llamar la función waiting en el controller, con lo cual se muestra el gif del spinner.
Cuando se termina de ejecutar la función funcionGuardar , del evento clic del botón Guardar, entra en acción el evento aura:doneWaiting, para llamar a la función doneWaiting del controller, y cambiar el estatus de la variable HideSpinner.
Una desventaja, es que si tienes una página usas más de 2 componentes y cada componente tiene su propio spinner y sus propios eventos de aura; al activar el evento aura:waiting, el spinner se mostrará en todos los componentes.
Código en el componente:
<aura:handler event="aura:waiting" action="{!c.waiting}"/>
<aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>
<aura:attribute name="HideSpinner" type="Boolean" default="true"/>
<aura:if isTrue="{!v.HideSpinner}">
<div class="slds-spinner_container" >
<div class="slds-spinner--brand slds-spinner slds-spinner--large" role="alert">
<span class="slds-assistive-text">Loading, Please Wait...</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
<aura:set attribute="else">
<lightning:button variant="brand" label="Guardar" title="Guardar" onclick="{! c.funcionGuardar }"/>
</aura:set>
</aura:if>
El siguiente código estaría en el controller.js
waiting: function(component, event, helper) {
component.set("v.HideSpinner", true);
},
doneWaiting: function(component, event, helper) {
component.set("v.HideSpinner", false);
}
Actualización
Los eventos aura:waiting y aura:doneWaiting, están en desuso según la documentación oficinal de Salesforce, por lo que se recomienda usar otro método.