AntoineW/luge

How to perform updates correctly?

Closed this issue · 1 comments

blzzz commented

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:

updateHandler () {

Also should evoke a reveal "refresh":

updateHandler () {

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.

blzzz commented

btw, the trails' undeleted svgs are observable in the nextjs example you shared here: https://codesandbox.io/s/magical-ramanujan-3njk4
2022-01-05 09 32 37