백엔드 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> 

다른 컨트롤러를 호출하기 위해 어떻게 든 컨트롤러에 몇 가지 논리를 추가해야하지만, 난 그냥 잘 모릅니다과 무엇이 최선인지 확신하지 그것을 할 방법! 예를 들어

나는 서버에 호출을 어떤 컨트롤러를 가지고 있고 나는 그런 행동이 발생했을 때 어떻게 든 자동으로 로딩 스피너를 보여 드리고자합니다 :

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; 
    }