CODEWITHSUNDEEP
ember.js
jwoww
jwoww

Reputation: 1071

How to keep parts of UI still usable while loading spinner is showing in Ember?

I successfully (and quite easily) implemented a loading spinner in Ember CLI by following the docs and an SO answer:

http://guides.emberjs.com/v1.10.0/routing/loading-and-error-substates/

However, my app consists of a series of filters/options (think of a Kayak type UI), and I want the UI to remain visible and usable while the spinner is showing. Right now, the spinner replaces the entire view until it is complete. A user wanting to select 4 check boxes would have to click and wait for each of them.

In this blog post (http://balinterdi.com/2014/06/18/indicating-progress-loading-routes-in-ember-dot-js.html), I found how to override the loading action on the route, but I'm not sure how to overlay the spinner on the results portion of the page, rather than having it take over completely.

I'm not currently making use of the nested routes features of Ember, but I gather from the same blog post that perhaps yielding at some point and then having the loading route be a child could work, but some more concrete direction would be super helpful.

Here's a rough sense of what my code looks like

router.js

Router.map(function() {
    this.resource('listings', {path: '/'}

listings.hbs

<!-- filters -->
{{#each category in category_options}}
  {{active-button category=category selectedCategories=categories action="filterCategory"}}
{{/each}}
<!-- end filters -->

<!-- results - want to replace this with spinner -->
{{#each listing in model}}
  <!-- various listing details -->
{{/each}}

loading.hbs

<div class="spinner">
<p>Loading</p>
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>

Upvotes: 1

Views: 166

Answers (1)

jwoww
jwoww

Reputation: 1071

I solved this to 99% with the code below. I don't say 100%, because I'm still getting an error that it can't find the outlet to connect to when the page loads the first time. This is because the outlet technically doesn't exist yet - the page hasn't been rendered when the first load starts happening. I haven't figured out how to solve this. Calling this.render() in the loading function makes it work, but then the disconnectOutlet doesn't work properly.

Beyond that 1%, here's what I have working:

routes/listings.js

import Ember from 'ember';

var ListingsRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.findQuery('listing', params); // a slow query
  },
  afterModel: function () {
    this.disconnectOutlet({
        parentView: 'listings',
        outlet: 'loading'
    });
    $('div#main').show(); // show the results section again
  },

  actions: {
    loading: function(transition, originRoute) {
        this.render('listings/loading', {
            into: 'listings',
            outlet: 'loading'
        });
        $('div#main').hide(); // hide the search results section
        return false;
    },
  },
});

export default ListingsRoute;

templates/listings.hbs

<!-- filters -->
{{#each category in category_options}}
  {{active-button category=category selectedCategories=categories action="filterCategory"}}
{{/each}}
<!-- end filters -->

{{outlet 'loading'}}
<div id="main">
<!-- results - want to replace this with spinner -->
{{#each listing in model}}
  <!-- various listing details -->
{{/each}}

and I placed loading.hbs in templates/listings/

Hope this helps someone else.

Upvotes: 2

Related Questions