Fix for long shown launch screen on Meteor app

#misc

In one recent project I came across an issue of app’s launch screen being shown for quite a long time. To be exact - 6 seconds. Each and every time the app was started.

Looking into the Meteor’s default packages, I found out it was the launch-screen package (now part of the mobile-experience) responsible for showing launch screen while the app is starting. After a bit of digging into the package, I found this code block:

Meteor.startup(function () {
    if (!Template) {
        handle.release();
    } else if (Package['iron:router']) {
        Package['iron:router'].Router
            .onAfterAction(function () {
                handle.release();
            }
        );
    } else {
        Template.body.onRendered(function () {
            handle.release();
        });

        setTimeout(function () {
            handle.release();
        }, 6000);
    }
});

Project did not use the iron:router package, instead it was using kadira:blaze-layout + kadira:flow-router, so the else if (Package['iron:router']) part was irrelevant. Final else statement is the point of interest - Template.body.onRendered(function () {...} was supposed to remove launch screen once body template is rendered, however, it did not.

The reason for it was quite simple - this project did not have any <template name="body"> template - kadira:blaze-layout appends the template contents to body tag automatically, so it makes it natural to not create one.

Since there is no body template, the Template.body.onRendered(function () {...} callback never gets executed and launch screen gets removed only after 6 seconds, which is a fallback behavior in order to avoid launch screen being shown for ever. There are 2 ways how to fix it.

1) Do create the body template and include the rest of the templates within it - this will result in body template function Template.body.onRendered(function () {...} being run and launch screen removed. However, this solution has a side effect - blank page flicker.

Apparently, page contents do not get completely rendered when the function is executed and for just a short moment you see a blank page. Not nice user experience, therefore consider second fix.


2) Manually remove the app’s launch screen using template render callback function on home page / landing page template. If you have a template called “homepage”, which is the first shown template in your app, following code will remove the launch screen 100 milliseconds after it is ready.

Template.homepage.onRendered(function () {
    if (Meteor.isCordova
        && typeof navigator !== 'undefined'
        && navigator.splashscreen)
    {
        setTimeout(function () {
            navigator.splashscreen.hide();
        }, 100);
    }
});

100 millisecond wait is enough for contents to be completely rendered while the launch screen is still visible, therefore, avoiding blank page flicker.


Launch screen should now be shown for just about 2 seconds - you’ll notice the difference right away. App startup will feel much faster. So, if you are having same issue on Meteor app, just use the code above, replace the template name and done!

⇐ All Blog Posts
Tweet Share