Ionic-framework: App takes 1-2 seconds to load, doesn't look so good

[ihadeed]

I've been experiencing this with all Ionic 2 versions.

It's not really a big issue, but fixing this can improve the user experience IMO.

Launching an Ionic 2 app takes a second or two. In the meanwhile, the screen just shows plain HTML without CSS/JavaScript.

Here's a quick demo:

Is there a way to fix this? Are you aware of the reasons that's causing it?

Thanks!

[guillenotfound]

I'm agree with you, my delay takes up to 10 secs in some cases.
Takes like 6 seconds to evaluate app.bundle.js

Also note the square at the top - left corner while HTML is loading:

[ihadeed]

@ZiFFeL1992 I have that little button showing up only on this app. other apps show a blank page for a few seconds.

[guillenotfound]

@ihadeed I also have it on my app, don't know the reason.

Here is a graph on my app while loading:

[ihadeed]

I get the same thing, but it loads faster than your case. Maybe because my app is small.

[manucorporat]

@ihadeed @ZiFFeL1992 We are working in a new build chain featuring:

• Offline compiler for angular 2 templating.
• Closure compiler to minify and optimize js
• Webpack2 Tree Shaking (eliminates unused exports)

There are a lot of room for improvements but ionic 2 is still beta, so it has not been optimized yet, please be patient!

[ihadeed]

thanks @manucorporat

• Do you have an estimate on when those changes will be available? (No rush! just curious :grin: )
• Are you waiting for Angular2 RC.2? or are you working side-by-side with the angular team?
• Is there any way I could help?

[jgw96]

Hey @ihadeed ! At this point we don't have a solid timeline on this but it is a high priority and work is being done on it currently. We are currently working side by side with the Angular team on this issue as they are doing alot of work on making Angular apps load extremely fast. Our short term plan is to implement the build chain that @manucorporat mentioned above. Longer term, we have discussed implementing an app shell architecture and implementing Angular Universal to make our first render lightning fast. I have done some experimenting with this and the results are pretty awesome. I would recommend talking to the Ionic CLI team about contributing for this issue as I'm sure they would love some help with this! Thanks for using Ionic and thanks for all the awesome work on Ionic Native!

[jlcarvalho]

@jgw96 can you share some experiments with us? I have a lot of interest on this and maybe I can help.

[ihadeed]

I would love to see some experiments too, if there are any :grin:

.. and hey @jlcarvalho check these two repos out:
https://github.com/alexpods/angular2-universal-starter
https://github.com/angular/universal-starter