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:

/app/routes/search.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Ember from 'ember';

export default Ember.Route.extend({

  queryParams: {
    query: {
      refreshModel: true
    }
  },

  model(params) {
    let q = params.query;

    if (q) {
      return this.store.query('note', { title: q });
    } else {
      return this.store.findAll('note', { reload: true });
    }
  }
});

Time for styling to make loader beautiful.

app/styles/app.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.loading {
  position: fixed;
  top: 0; right: 0;
  bottom: 0; left: 0;
  background: #fff;
}

.loader {
  left: 50%;
  margin-left: -4em;
  font-size: 10px;
  border: .8em solid rgba(218, 219, 223, 1);
  border-left: .8em solid rgba(58, 166, 165, 1);
  animation: spin 1.1s infinite linear;
}

.loader, .loader:after {
  border-radius: 50%;
  width: 8em;
  height: 8em;
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -4.05em;
}

@keyframes spin {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

And where the magic happens:

app/templates/search-loading.hbs

1
2
3
4
5
{{#full-screen-modal-dialog}}
  <div class="loading">
    <div class="loader"></div>
  </div>
{{/full-screen-modal-dialog}}

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!