title: Handling page loading with Promises
body: <p>I have a variable handling page loading with true or false. If all data is ready, a loading icon is hidden and the rest of the page shows up then 'loading' the variable is 'false'.</p>
  
  <p>I run multiple functions to retrieve data from a data base in <code>Promise.all()</code> to make sure all data is ready.</p>
  
  <p>However, there is a time lag between the variable change and the page change. It takes about 10 secs to show the rest of the page even if  all data is ready and 'loading' variable is 'false'. </p>
  
  <pre><code>$scope.load = true;
  
  function getData1(){
       return new Promise((resolve, reject) =&gt; {
           //this is http call from Customer Service
           Customer.getCustomers().then(function(data){   
               if (data.data.success) {
                  $scope.customers = data.data.customers; 
                  resolve(true);          
               } else {
                   reject(false);
               }
          })
       })
  }
  function getData2(){
       return new Promise((resolve, reject) =&gt; {
           //this is http call from Event Service
           Event.getEvents().then(function(data){   
               if (data.data.success) {
                   $scope.events = data.data.events; 
                   resolve(true);         
               } else {
                 reject(false);
               }
           })
       })
  }
  .
  .
  .
  Promise.all([getData1(), getData2(), getData3()])
      .then(results=&gt;{
          $scope.load = false;            
  })
  </code></pre>
  
  <p>If I place <code>$scope.load = false</code> in each functions it can be solved but it does not make sense to put <code>$scope.load = false</code> in all functions instead of placing it in <code>Promise.all()</code> only once.</p>
  
  <pre><code> function getData1(){
       return new Promise((resolve, reject) =&gt; {
           //this is http call from Customer Service
           Customer.getCustomers().then(function(data){   
               if (data.data.success) {
                  $scope.customers = data.data.customers;
                  $scope.load = false;
                  resolve(true);          
               } else {
                   reject(false);
               }
          })
       })
  }
  </code></pre>
  
  <p>Can anyone explain why the time lag happens in this case?</p>
  
  <hr>
  
  <p>I do not see any loops or anything in the functions which take 10 seconds to go through. When I put <code>console.log(results[0]) console.log(results[1]) console.log(results[2])</code> inside of <code>Promise.all()</code> it shows immediately that the promises are resolved.</p>