Loading states not working for me with liquid-outlet

[danr1979]

Hi.

I've been experimenting with LF today (latest version on Ember 2.4) but have found that my CSS loader, which is in my loading substate template, is not displayed when I use a liquid-outlet. Instead i just see a white screen.

Occasionally it appears briefly but immediately slides up the screen & vanishes. I've tried using a position: fixed CSS class on the loader to try to fix this but this didn't help.

Does anyone have any suggestions please?

Thanks.

[ef4]

If it works with a regular outlet but gets positioned off screen in a liquid-outlet, it's a CSS problem.

If your spinner is not statically positioned, the liquid-outlet can't tell what size it's supposed to be, so you'll need to set dimensions explicitly on the .liquid-child class.

[danr1979]

Ok, thanks for the tip. I'll give it a try.

[danr1979]

Hi again.

Unfortunately I've still not managed to get liquid fire working properly with my loader. I'd really like to use the library as it will really benefit our UI so I wonder if I could get some more information from you about a possible solution?

I use the Semantic UI CSS framework http://semantic-ui.com and the loader supplied with it (http://semantic-ui.com/elements/loader.html) in its dimmer form, e.g.

`

Loading

`

This takes up the entire page when an Ember loading transition is displayed but, as I said before, the loader either doesn't show up at all or scrolls rapidly off the top of the page.

You said before that the liquid-outlet can't tell what size it needs to be so I need to set the size on the .liquid-child class so if the loader is full screen is it enough to just set it to height: 100% and width: 100% or does it require a pixel value?

Also, one of my transitions is this:

this.transition( this.fromRoute('quotes.list'), this.toRoute('quotes'), this.use('toLeft'), this.reverse('toRight'), this.debug() );

and the pod-based structure of my application is shown in the attached image.

However, I get the following error when the transition occurs:

[liquid-fire] Checking transition rules for 
<div id="ember837" class="ember-view liquid-container"></div>
[liquid-fire rule 2] rejected because oldRoute was loading
[liquid-fire rule 2 reverse] rejected because oldRoute was loading
[liquid-fire rule 2 reverse] rejected because newRoute was quotes

and the animation does not occur.

Any help you can offer me would be welcome.

Thank you.