Welcoming Screen instead of Blank Screen


#1

Hi guys!

Sorry if this sounds silly or wastes your time. I am medical student from Cambodia with little background in programming. I am writing an Ember app to digitalize patient records in Cambodia, however the white screen while Ember app is loading is not a good user experience to attract my practicians to use technology in their daily practices.

I put a div#splashscreen styled with css to mimic the splash screen in the body tag of index.html and then I used didRender or didInsertElement hooks to remove that div#splashscreen or just change the display to none. It kind of solves my problem, but I do not see anyone doing this. I guess there might be something wrong with this approach because even Ember Observer leaves the white blank screen as it is.

Once again, I am really a noobie in Ember as well as programming in general. Sorry if there is anything wrong.

May anyone help me out with this?


#2

This is an established pattern and there is also an addon to help with it: https://www.npmjs.com/package/ember-load


#3

Yes, that’s exactly what I want. Thank you so much, @jasonmit.


#4

ember-load relies on views + so if your on Ember 2+ you’ll also need ember-legacy-views addon.


#5

I wrapped the app in a component so that I can use didRender hook to remove the splash screen. Is it better than using the addon?


#6

Good open source opportunity to move it forward.


#7

Just spent a while playing with that add-on to move it forward as you put it - but seems like Mike has already removed that dependency / and it just wasn’t noted. : )