Displaying Loading Screens to Waiting Users
I came across an issue where I was having to wait a second or two for my app to load, in the meantime I was looking at a blank page. I don't think it's healthy to expect a user to look at a blank screen while your app gets up, gets dressed and leaves for work 2 seconds late.
The solution was to give the user an animation to watch while it loaded. This short tutorial will show you how to do that using SVG images. The same method can be adapted to use CSS loaders.
- Download and unzip the repo from here
meteorfrom the root folder of the unzipped file.
- See it in action at
If you intend to adapt the code for your own project you need to add this package; meteorhacks:inject-initial, which will give you an 'API to modify the initial HTML sent by Meteor to the client.'. You also need to remove autopublish with
meteor remove autopublish
Place any loading screen svg files you have inside of
public/svg-loaders. The ones supplied with this code sample were provided by Sam Herbert
All code is commented but the key files to examine are:
The finished example can be found here Enjoy :)