neon-animation
neon-animation copied to clipboard
Lazy instantiation of neon-animated-pages children
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,
-pagesis in control of when something is instantiated (for transition effects),- can support both
<template>and plain elements (i.e. backwards compatible).
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.
Any progress on this?
We've ended up using the now abandoned https://github.com/atotic/lazy-pages, which seems to work fine (with animation integration).
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
neon-lazy-pages has now been implemented in version v1.4.0 of the iron-lazy-pages repository :tada: