I’ve noticed that my Ember app (somewhat smallish-medium proprietary app) takes 1-5 seconds to boot from hitting the URL to the first UI elements on the screen. On mobile, this can feel even more like an eternity.
Therefore, I took a few hours last week and hacked away at my
index.html and came up with this Gist, linked below.
In short, it functions as an “app shell” to bootstrap Ember by first rendering a splash screen as quickly as possible, and only then actually making a network request for the ember code and app scripts.
- It takes all the usual ‘index.html’ boilerplate (/vendor.js, /vendor.css, /appname.css, appname.js, etc) - everything Ember-specific - and puts it in a hidden
- Then it declares the CSS for a loading animation and HTML with inline styles to render a simple full-page splash screen
Posting here in hopes that others may find it useful, as well as for people to critique if desired and give feedback on best practices. And, if someone else has already done this, point it out too! Thanks everyone!