Initial Page Load

Hi Guys!

Is there a way to show a progress bar until meteor app has been fully loaded. It’s not good to have a white screen for 15 seconds. Instead of that the user should see a progress bar. Is there a clever way doing that?

regards
P

I presume you mean after launch image has gone away.

Adding a <body>...</body> tag will to an html file in your /client folder:

  1. Make the launch image go away sooner
  2. Allow you to put js logic on the body before the full app has loaded by using Template.body.onCreated and Template.body.helpers in a .js file in your /client folder, which you can use to build a loading bar.

I’m playing with this right now in my app. I have some stutters towards the end, but a very helpful indicator still. I don’t know a way to get a real loaded percentage, I just use a time based guesstimate with parabolic easing.

Also it seems for me the initial loading time is about 18 seconds similar to what you say (Nexus 5). However after that it looks like some app data is cached / stored (~30MB) and the app then only takes about 6 seconds to load (ready pretty much soon as the launch image disappears). So really all this effort is for the first launch only (it’s important to me, your call if it’s important enough to you).

2 Likes

Are you using Meteor, Blaze and Cordova in your app?

@fcaldas - Yes I’m running Meteor, Blaze, and Cordova. Though the first and I think last are implicit.

I am using Blaze and Meteor version 1.2.1. In my case it’s a browser app. I tried running with meteor run --production.
And now the whole app renders within 4 seconds. Awesome!

I know this is a really old thread, so I’m sorry for awakening the beast. Was wondering if you had a code example for the parabolic easing? That article is super informative, but I’d rather copy/paste something than try to math by myself… it’s a bit less relevant with optimizations made in 1.7, but I still find a 1.8s initial page load to be a bad user experience and want a flashy percent loader. I can estimate bundle page load time easily, and now I’m just looking for the maths code…