バックエンドSalesforce Cloud上のリクエストごとにローディングスピナーを追加するにはどうすればいいですか？

Question

何らかの種類のインターセプタを使用したいと思います。または、サーバーに行われたリクエストごとにローディングスピナーを表示するものがあります。それの。私は現在、ビューとコントローラを保持しているスピナーコンポーネントを持っていますが、ヘッダーや他の場所のビューに表示するすべてのHTTPリクエストに対してこの一般的な方法をどうやって作っているのだろうかと思っています。

これは、ビューの一部です：

<aura:component > 
<aura:attribute name="visible" type="Boolean" default="false"/> 

<div class="{!if(v.visible, '', 'slds-hide')}"> 
    <div class="slds-spinner_container"> 
     <div role="status" class="slds-spinner slds-spinner_medium"> 
      <span class="slds-assistive-text">Loading</span> 
      <div class="slds-spinner__dot-a"></div> 
      <div class="slds-spinner__dot-b"></div> 
     </div> 
    </div> 
</div> 

私は何とかコントローラにそれを呼び出すための他のコントローラのためのいくつかのロジックを追加する必要がありますが、私は何が最善かかなり確実知っているではないいけませんそれを行う方法！ EXのために

私は、サーバーへの呼び出しを行う一部のコントローラを持っていると私は、そのような行為が発生したときに何とか自動的にロードスピナーを表示したいと思います：あなたは、サーバーの呼び出しに呼び出しているときはいつでも

doInit : function(component, event, helper) 
{ 
    var getTeamAction = component.get("c.getCurrentUserTeam"); 
    getTeamAction.setCallback(this, function(response) { 
     if(response) 
     { 
      var t= response.getReturnValue(); 
      component.set("v.millTeamMembers", t); 
     } 
     else 
     { 
      console.log("Unable to getteam"); 
     } 
    }); 

    $A.enqueueAction(getTeamAction); 
} 

Answer 1

は、これを使用doShowModalProcessing（comp）メソッドと応答を取得した後doHideModalProcessing（comp）。

マークアップ：

<div aura:id="modalProcessing" class="busy-backdrop busy-backdrop--open hideDiv"> 
    <div class="slds-spinner--brand slds-spinner slds-spinner--large" aria-hidden="false" role="alert"> 
     <div class="slds-spinner__dot-a"></div> 
     <div class="slds-spinner__dot-b"></div> 
    </div> 
</div> 

ヘルパー：

doShowModalProcessing : function(component) {   
    var modal = component.find("modalProcessing"); 
    $A.util.removeClass(modal, 'hideDiv'); 
}, 
doHideModalProcessing : function(component) { 

    var modal = component.find("modalProcessing"); 
    $A.util.addClass(modal, 'hideDiv'); 
}, 

CSS：

.THIS.hideDiv { 
    display: none; 
    }