neon-animation icon indicating copy to clipboard operation
neon-animation copied to clipboard

Lazy instantiation of neon-animated-pages children

Open tommie opened this issue 9 years ago • 5 comments

Currently I do something like

<neon-animated-pages selected="{{route}}">
  <my-page name="a" somedata="{{params.somedata}}"></my-page>
  <my-page2 name="b" somedata="{{params.somedata}}"></my-page2>
</neon-animated-pages>

which always keeps the elements instantiated. This is fine philosophically (preloading page data whenever the right parameters are present), but leads to longer initialization times and likely higher memory usage.

Doing

<neon-animated-pages selected="{{route}}">
  <template is="dom-if" if="{{isMatch(route, 'a')}}">
    <my-element name="a"></my-element>
  </template>
  <template is="dom-if" if="...">
    <my-element2 name="b"></my-element2>
  </template>
</neon-animated-pages>

would be bad for code clarity reasons, and it won't interact well with animations that need to keep old pages around for a while without much logic in isMatch.

Suggested supporting e.g. lazy:

<neon-animated-pages selected="{{route}}" lazy="true">
  <template name="a"><my-element></my-element></template>
  <template name="b"><my-element2></my-element2></template>
</neon-animated-pages>

which gives us

  • No duplication of route names/logic,
  • -pages is in control of when something is instantiated (for transition effects),
  • can support both <template> and plain elements (i.e. backwards compatible).

tommie avatar Jan 21 '16 15:01 tommie

This week I will be trying to integrate this element with https://github.com/TimvdLippe/iron-lazy-pages Probably the best solution would be to make my element a behaviour instead and make it compatible with neon-animated-pages.

TimvdLippe avatar Apr 17 '16 21:04 TimvdLippe

Any progress on this?

BartKoppelmans avatar Jul 12 '16 11:07 BartKoppelmans

We've ended up using the now abandoned https://github.com/atotic/lazy-pages, which seems to work fine (with animation integration).

tommie avatar Jul 12 '16 13:07 tommie

There is a pull request open on iron-lazy-pages to introduce a new element neon-animated-pages which does exactly this. Please check out https://github.com/TimvdLippe/iron-lazy-pages/pull/24

TimvdLippe avatar Jul 12 '16 18:07 TimvdLippe

neon-lazy-pages has now been implemented in version v1.4.0 of the iron-lazy-pages repository :tada:

TimvdLippe avatar Sep 16 '16 08:09 TimvdLippe