ef4 / ember-elsewhere

Render elsewhere in the DOM, with nice composition, animation, etc. Based on 100% public API.
MIT License
184 stars 25 forks source link

Slight delay in removing components when transitioning #17

Open adamhong opened 7 years ago

adamhong commented 7 years ago

I've noticed there is a slight delay in elsewhere components being removed from the DOM when transitioning. We're using a workaround on willTransition route hook to handle this for now.

ef4 commented 7 years ago

Yes, ember-elsewhere generally requires two render passes. That's the only way to safely make the act of rendering one template alter the content of another (and it needs to be done carefully to avoid arbitrarily large performance impact and/or backtracking re-render assertions).

Generally this is ok, since glimmer's updating VM is extremely efficiently, so the second render doesn't cause much extra work. It does mean there is a possibility that the browser will actually paint the intermediate state and it could be perceptible under some conditions.

I am open to exploring ways to avoid the second render. There are possible solutions, but they would all require support deeper down inside the glimmer virtual machine.

sheldonbaker commented 6 years ago

I think I've been bitten by this too:

{{#if buyerToEdit}}
  {{to-elsewhere named="modal" send=(hash
    modal=(component "buyer-editor"
      buyer=buyerToEdit
      save=(pipe-action (action saveBuyer) (action (mut buyerToEdit) null))
    )
    close=(action (mut buyerToEdit) null)
  )}}
{{/if}}
{{#from-elsewhere name="modal" as |sent|}}
  {{#if sent}}
    {{#modal-dialog}}
      {{component sent.modal close=sent.close}}
    {{/modal-dialog}}
  {{/if}}
{{/from-elsewhere}}

After my save action finishes, and buyerToEdit is null, the buyer-editor component remains in the DOM, albeit with a now-null buyer object. Is there a way around this aside from explicitly checking inside the buyer-editor component?