How to perform updates correctly?
Closed this issue · 1 comments
At first, many thanks for sharing your wonderful animation framework!
I'm struggling in finding out he correct way to perform page updates in the context of a Nextjs/React project:
It seems like luge.lifecycle.refresh()
is the way to do it – but it has a not-so-nice side effect on cursors (they jump back to 0/0 and the trails' svgs are not properly resetted/removed).
After a deeper look into your code, it seemed to me that emitting an update
event would allow reveal and smoothscrolling effects to update properly while the cursor don't really need to be updated (a refresh()
would do that though).
So all I would need is this simple line:
luge.emitter.emit("update")
I would expect that this should update the bounding of the new loaded page:
luge/src/js/luge/plugins/SmoothScroll.js
Line 100 in ec40cf5
Also should evoke a reveal "refresh":
luge/src/js/luge/plugins/Reveal.js
Line 253 in ec40cf5
Both doesn't seem to happen. Here's my hook – what am I doing wrong?
const useLuge = (settings: any) => {
const router = useRouter();
const [luge, setLuge] = React.useState<any>(null);
React.useEffect(() => {
if (!luge) { // on init
// @ts-ignore
!SSR && import("@waaark/luge/dist/js/luge")
.then((luge) => {
luge.settings(settings)
setLuge(luge);
})
.catch((error) => console.error(error));
}
})
React.useEffect(() => {
if (!luge) return;
// whenever a new route has loaded, trigger a luge refresh
const handleChange = () => {
luge.emitter.emit("update")
}
router.events.on('routeChangeComplete', handleChange)
return () => {
router.events.off('routeChangeComplete', handleChange)
}
}, [router, luge])
return { luge };
}
Thanks for your help.
btw, the trails' undeleted svgs are observable in the nextjs example you shared here: https://codesandbox.io/s/magical-ramanujan-3njk4