フェッチデータとレンダリングタスクが完了する前にロードポップアップを表示するにはどうすればいいですか

Question

私はsearch_hotelsメソッドを呼び出すページを持っています。

サーバがJSONを返すのに約2秒かかるでしょう。

返されるJSONのサイズには、2つの項目が含まれています。

また、ng-repeatですべてのアイテムを処理してレンダリングするには2〜3秒必要です。

待ち時間を人に伝えるためにローディングウィンドウを表示する方が良いでしょうか？

 function search_hotels(q_param) { 
      roomSkuService.search(q_param).$promise.then(function(resp) { 
       _.each(resp, function(item) { 
        var region = item.hotel.region; 
        if ($scope.region.list.indexOf(region) < 0) { 
         $scope.region.list.push(region) 
        } 
       }); 

       $scope.hotels = _.groupBy(resp, function(row) { 
        return row.hotel_id; 
       }); 
      }); 
     } 

Answer 1

レンダリングの終了後、ローディングウィンドウを非表示にするには、$ timeoutを使用することをおすすめします。

function search_hotels(q_param) { 
      //show the loading window 
      roomSkuService.search(q_param).$promise.then(function(resp) { 
       _.each(resp, function(item) { 
        var region = item.hotel.region; 
        if ($scope.region.list.indexOf(region) < 0) { 
         $scope.region.list.push(region) 
        } 
       }); 

       $scope.hotels = _.groupBy(resp, function(row) { 
        return row.hotel_id; 
       }); 

       //execute after rendering 
       $timeout(function(){ 
        //hide loading window 
       },0); 
      }); 
     }