spinnerの設定方法

Auraコンポーネントにて、spinnerの設定方法を記載。
spinnerは簡単に言えば処理が終わるまで表示されるローディング(ぐるぐる)画面です。

注意：spinnerとjQueryの相性があまり良くないため、jQueryの中にspinner処理は入れないようにしてください。

・コンポーネント

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

・variant属性は、spinnerの外観についての記載です。
　「brand」を設定した場合、spinnerはLightning Design Systemブランドの色と同じになります。
　「inverse」を設定した場合、白いspinnerが表示されます。(デフォルトはダークブルー)

・コンポーネントのHelper.js

showSpinner:function(component){
　const spinner = component.find('spinner');
　$A.util.removeClass(spinner, 'slds-hide');
}

hideSpinner:function(component){
　const spinner = component.find('spinner');
　$A.util.addClass(spinner, 'slds-hide');
}

・コンポーネントのController.js
spinnerを入れたい処理の始めに

helper.showSpinner(component);

を入れて、終わりに

helper.hideSpinner(component);

を入れる。