Desing Fullscreen Search Interface With Ember - Part 3
Recently I was using tripadvisor.com and I noticed that this application also uses fullscreen modals dialogs for displaying data dynamically. What’s was interesting, I discovered a different approach to make rendering modal effect smooth.
There is a kind of sub-screen with a fullscreen loader. I have fallen in love with that experience so I will reimplement it with Ember…
UPDATE: Please check this approach, seems that’s the new Ember way how to deal with it and deliver great UX: https://emberway.io/skeleton-screen-loading-in-ember-js-2f7ac2384d63
Anyway, in part 2 we finished with kind of loader placed within fullscreen modal content. It was just raw text, but the thing is that we can use fullscreen loader as Tripadvisor does!
That’s easy thanks to the routable approach we choose and ember built-in loading substates.
Router code is extremely simple now:
import Ember from 'ember';
Time for styling to make loader beautiful.
And where the magic happens:
Yeah, we are reusing here our full-screen-modal-dialog again.
That’s pretty cool, with just a few lines of code!
I hope you enjoyed it!