How do I create a "loading screen" for first time SPA visit caching

Question

I have created a Single Page Application using Hot Towel.

When I started I had this "first time loading screen" when it was caching. I deleted it but I can't figure out how to reimplement it. I have also added a lot of other frameworks, and my webpage has gotten a lot more complicated since then. I still use RequireJS, Knockout and AngularJS primarily.

I am not sure how to go about it.

I don't remember how it was done originally, and I am having trouble googling how to implement it.

Anyone can point me in the right direction?

score 2 · Answer 1 · answered Apr 29 '14 at 12:20

Maybe something like the following

<div class="loadingScreen" ng-show="!isLoaded">
  <div>Loading...</div>
</div>
<div class="container ng-hide" ng-show="isLoaded" >
   Page Content
</div>

JS

angular.module('myApp').controller("itemController", function($scope, itemService){
    $scope.isLoaded = false;
    ...Other stuff down here...

    //After your ajax call that saturates your view, set $scope.isLoaded = true;
    itemService.getItems().success(function(data){ 
       $scope.isLoaded = true;
    });
}

CSS

.loadingScreen{
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   background-color: white;
   text-align: center;
   -webkit-transform-style: preserve-3d;
}

.loadingScreen > div{
  position: absolute;
  top: 47%;
  left: 47%;
}

score 2 · Answer 2 · answered Apr 29 '14 at 13:32

From the hot-towel github page: https://github.com/johnpapa/HotTowel-Angular/blob/master/NuGet/HotTowel-NG/index.html

    <div id="splash-page" data-ng-show="false">
        <div class="page-splash">
            <div class="page-splash-message">
                Hot Towel Angular
            </div>
            <div class="progress progress-striped active page-progress-bar">
                <div class="bar"></div>
            </div>
        </div>
    </div>

with ng-show="false" being the secret sauce

score 0 · Answer 3 · answered Mar 22 '16 at 15:12

This is a simple implementation of a loading/splash view using angularjs. The splash view is shown by default (raw html) until angular completes its initialization cycle. Once the app is initialized, the appReady scope variable is set and the splash view is removed by the ngIf directive.

<div class="body-content panel-body text-center" ng-if="!appReady">   
    <div class="row" >
      <div class="col-sm-12">
        <div class="">
          <i class="fa fa-spin fa-spinner fa-5x"></i>
         <h3>
         App is loading
         </h3> 
        </div>
      </div>
    </div>
    </div>

The run function just sets the scope variable values:

var app = angular.module('app', []);
  app.run(['$rootScope',initApp]);  

  //initializes the scope variables
  function initApp($rootScope){    
      $rootScope.appReady = true; 
      $rootScope.appMessage = 'App is ready';  
  }

The app content can be hidden by using ngCloak directive.

<div class="body-content" ng-cloak>
...
</div>

Look at this article for more information:

http://www.ozkary.com/2016/03/angularjs-splash-view-to-prevent-flicker-on-init.html

How do I create a "loading screen" for first time SPA visit caching

3 Answers3