liquid-outlet not adjusting height and cutting off content

[xcskier56]

I've got a nested liquid outlet with a loading state, and it is not adjusting to the size of the new content after the loading state. I saw issue #518 and so I updated my velocity and it did not fix.

I'm using:
Ember 2.10, Liquid Fire 0.27.0, Velocity 1.4.2

While all of the markup is split into different files, here's the general structure:

{{#liquid-outlet}}
  {{!-- Some content --}}
  {{#liquid-outlet}}
     {{!-- main content --}}
  {{/liquid-outlet}}
{{/liquid-outlet}}

The loading state

<div class='panel' style='height: 800px'>

</div>

The content, wrapped in a blank div to ensure that the height of the inner content is correct

<div> <!-- This div is roughly 1500px tall -->
  <div class='panel'>
  </div>
  <div class='panel'>
  </div>
  <div class='panel'>
  </div>
  {{!-- ... --}}
</div>

What gets rendered:

<div class="liquid-container">
  <div class="liquid-child" style="top: 0px; left: 0px;">

    <div class="liquid-container" style="height: 822px;">
      <!-- This div is always 22px taller than the loading state div. Eg this loading state is 800px tall -->

      <div class="liquid-child" style="top: 0px; left: 0px;">
        <div class="liquid-container">
          <div class="liquid-child" style="top: 0px; left: 0px;">
            <div class="panel">
              <!-- This content is much longer than 822px -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Route structure:

[xcskier56]

@ef4 friendly ping here.

I've done more digging into this, and it appears that this happens when a loading state is active for less time than the growDuration property on liquid-container. So when we spend some, but very little time in a loading state, this occurs. I think that this might relate to #226

What I think might be happening is that the second height animation is getting triggered before the first one is completed and therefore it sees the height that it wants and needs to be equal and not running.

Here's a timeline of what is occuring

• Preparing to transition from 'parent' to 'child'
• Intermediate-transitioned into 'child_loading'
• animateGrow 1
  • starting animation 1 in growable#_adaptDimenstion
• Transitioned into child
• animateGrow 2
  • have === want, resolving promise in growable#_adaptDimension
• animateGrow 2 finished in growable#_adaptDimenstion
• animation 1 finished in growable#_adaptDimenstion

A hacky fix that I have is to set growDuration = 1, this way we finish the first animation before starting the second. I think a full solution would be to somehow cancel/stop the first animation when the second one is starting, but I'm not sure how to do that.

I'm happy to help fix this, just need some help/direction

[ef4]

Thanks for digging into this, your description makes sense. Cancelable animations are a big architectural change.

I have been laying the groundwork for them in https://github.com/ember-animation/ember-animated.

It needs more work before I can integrate it into liquid-fire, but the basic primitives are solid and if you're interested in exploring it's the place to look.