I have a lightning component which includes a spinner rendered by this code:
<aura:component access="global"
controller="SomeAuraController"
implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickActionWithoutHeader"
>
<ltng:require scripts="{!$Resource.AURA_LightningPromiseHelper_JS}" />
<div aura:id="spinner" class="slds-spinner_container slds-hide">
<div class="slds-spinner--brand slds-spinner slds-spinner--large slds-is-relative" role="alert">
<span class="slds-assistive-text">Updating</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
<lightning:recordEditForm objectApiName="Contact" recordId="{!v.recordId}"
onsubmit="{!c.update}"
>
<lightning:inputField fieldName="LastName" />
<lightning:button type="submit"/>
</lightning:recordEditForm>
</aura:component>
My component requires a static resource which successfully controls the spinner with the following:
// See: http://bobbuzzard.blogspot.hu/2016/12/javascript-promises-in-lightning_30.html
const $LPH = (function(){
const alterSpinner = function(methodName) {
return (component) => {
$A.util[methodName](component.find('spinner'), 'slds-hide');
};
};
const showSpinner = alterSpinner('removeClass');
const hideSpinner = alterSpinner('addClass');
const ServerApexPromise = (component, serverMethodName, serverMethodParams) => {
const action = component.get('c.' + serverMethodName);
action.setParams(serverMethodParams);
return new Promise((resolve, reject) => {
showSpinner(component);
action.setCallback(this, (response) => {
hideSpinner(component);
if (response.getState() === 'SUCCESS') {
resolve(response.getReturnValue())
}
else {
const errors = response.getError();
const errorMessage = (errors && errors[0] && errors[0].message)
? 'Error message: ' + errors[0].message
: 'Unknown error';
reject (errorMessage);
}
});
$A.enqueueAction(action);
});
};
return {
ServerApexPromise: ServerApexPromise
};
}());
window.$LPH = $LPH;
In between, the controller has code like this:
sendCancel: function (component, event, helper) {
event.preventDefault();
$LPH.ServerApexPromise(
component,
'update',
{contact: event.getParam('fields')}
)
.then(helper.onSuccess(), helper.onFailure());
}
In order to make my outer component more concise and facilitate reuse, I'd like to move this code into a separate component (e.g. "LightningSpinner"):
<aura:component>
<div aura:id="spinner" class="slds-spinner_container slds-hide">
<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:component>
However, when I replace the original component code with <c:LightningSpinner />
, the spinner stops working.
What am I overlooking? How can I fix this?