How to create a splash screen or progress loading bar in Ember web app

Question

As an example:

http://help.apple.com/numbers/mac/3.6/

If you visit this page, you see first the activity indicator, then the page loads up. It feels like splash screen. The site seems built in Ember.js 1.x. I like the idea to have such splash screen, better than nothing especially when the network speed is slow.

How to implement this feature in Ember? Any good addon?

Answer 1

Take a look at the Pace library that can show spin bar also on loading initial scripts

Answer 2

Use the application loading substate, you can generate a template with

ember g template application-loading

(note the dash)

You can find out more about substates here:

https://guides.emberjs.com/v2.4.0/routing/loading-and-error-substates/

Or watch Alex short talk about them:

https://vimeo.com/157235004