Loading template

[mylanconnolly]

I was going to use liquid-fire in addition to Semantic-UI in an ember-cli project to handle route transitions and such, when I noticed that loading templates are no longer working. Quick breakdown of what I have going on (the app is still in early development):

templates
  users.hbs
  users
    index.hbs
    loading.hbs # Rendered by the loading state while JSON is fetched

Currently, users.hbs is just a heading and an {{outlet}} (which I replaced with a {{liquid-outlet}} when I installed liquid-fire).

When I did this (this was all the configuration I did so far), I noticed that the loading.hbs template stopped displaying (instead, Ember just waits for the data to come in before rendering the index.hbs template).

I am pretty sure this has something to do with misunderstanding or miscnofiguration on my part, as I am fairly new to Ember and still trying to work everything out.

The only code I wrote in the users routes are:

// routes/users/index.js
import CustomRoute from '../custom';

export default CustomRoute.extend({
  model: function() {
    return this.store.find('user');
  }
});

// routes/custom.js
import Ember from 'ember';

export default Ember.Route.extend({
  renderTemplate : function() {
    this._super();
    var initIconic = function() {
      new IconicJS().inject('img.iconic');
    };
    Ember.run.scheduleOnce('afterRender', initIconic);
  },
});

When I installed it, I did not yet set up a transitions.js file. Since all transitions were going to use a simple crossFade transition, I decided to just use the code {{liquid-outlet use='crossFade'}}.

For now, I removed liquid-fire and returned back to regular {{outlet}}s.

Thanks!

[ef4]

Thanks for reporting this issue. Apologies for the delay, I haven't had a chance to investigate yet, but this has moved to the top of the pile.

[mylanconnolly]

Thanks for looking at it!

[ef4]

I was unable to reproduce this.

Try checking the DOM to see if your loading template's content is really there. It's possible that the extra divs introduced by liquid-outlet are just breaking your layout and making it have zero height.

[mylanconnolly]

Thanks for looking into it. I will attempt to look into it more on my end and see if that was the case.

[jrdn91]

I'm having this same problem with my loading states.

My loading states are in a div set to be the full height and width of the window like so

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;

Which worked before adding the liquid-outlet but after the liquid-outlet it has a height of 0 and is not showing up on the page. Setting it's height to 100% doesn't work either as each of the divs created by liquid fire will have to be set to height 100% as well.

[allthesignals]

Having the same issue @Jordan4jc