データの読み込み時に「しばらくお待ちください」を表示する。

#データの読み込み時に「しばらくお待ちください」を表示する。

コンポーネントがロードされるタイミングに合わせて処理を行うためには、renderer.jsに処理を記述します。
「コンポーネント名+Renderer.js」という名前でjavascriptファイルが作成されます。

Renderer.jsには４つのメソッドを上書きすることが出来ます。

#	関数	説明
1	render	コンポーネントの読込開始のタイミングで呼び出される。このタイミングでコンポーネントの要素にアクセスしても取得できない。renderを記述するとフレームワークがコンポーネントを作成する処理を上書きしてしまうので、「this.superRender()」を呼び出してコンポーネントを作成する必要がある。
2	afterRender	コンポーネントの作成が終わった後に呼び出される。このタイミングだとコンポーネントを取得できる。※afterRenderを上書きすると、値が入力フィールドに入力した値がバインドされない事象を確認中・・・。継続して調べてますが、使用には要注意。 render関数だけでなく、afterRenderでも「this.superAfterRender」関数を呼び出して上げる必要がありました。
3	rerender	コンポーネント内の要素を再描画する際に、呼び出される。
4	unRender	コンポーネントを破棄したタイミングで呼び出される（らしい）。まだ使ってないです。

renderer.js

({
    render:function(cmp,helper){
      var ele = $A.util.getElement('waiting'); //ここでElementを取得してもnull
      var s = this.superRender();      
      return s;
    },

    afterRender:function(cmp,helper){
      var ele = $A.util.getElement('waiting'); //ここだとElementを取得できる
    },
    
    rerender:function(cmp,helper){
        var ele = $A.util.getElement('waiting');  //当然ここでもElementを取得できる。
    }
})

上記をふまえて、初期表示時に「しばらくお待ちください」を表示させるための実装をしてみました。

doInitのアクションで、childListを取得してきます。
childListを取得してくる間、画面に「しばらくお待ちください」を出します。

<aura:component controller="TLP.AdventCal">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <div id="waiting">しばらくお待ちください</div>
    <aura:attribute name="childList" type="List"/>
    <div>
	    <aura:iteration var="item" items="{!v.childList}">
    	        <div>{!item.Name}</div>
                <div>{!item.parentName}</div>
	    </aura:iteration>
    </div>
</aura:component>

データを取得後、rerender関数が呼び出されるため、そこで、「しばらくお待ち下さい」を非表示にするためにクラスを追加します。

AdventCalendarRenderer.js

({
    rerender:function(cmp,helper){
        var ele = $A.util.getElement('waiting');
        $A.util.addClass(ele,'nonDisplay');
    }
})

スタイルで要素を非表示にします。

AdventCalendarCmp.css

.THIS.nonDisplay{
	display:none;
}