How to show a loading indicator when loading the app at the first time
I've used Pace.js before on a legacy project written almost entirely in Backbone.js, in which waiting for all the dependencies to resolve was pretty painful.
It's almost no configuration to get started, so if you're looking for a relatively simple library, I'd use that one.
Edit:
From the Docs:
Include pace.js and the theme css of your choice on your page (as early as is possible), and you're done!
Pace will automatically monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again!
If you use AMD or Browserify, require in pace.js and call pace.start() as early in the loading process as is possible.
Example
<head>
<script src="/pace/pace.js"></script>
<link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>
For Angular Apps use Angular Loading Bar. Looks like this.
- Would apply to whenever an XHR request goes out in angular
- Can specify which request to not display loading icon
- Only displayed when the request causes user to wait
- Can be styled to your liking
- Injected into the services module and just works