#Using Solid Router and View transitions

5 messages · Page 1 of 1 (latest)

opaque gull
#

I am trying to combine Solid router and new released Chrome view transition api. https://developer.chrome.com/docs/web-platform/view-transitions/

So far I have tried few approaches.
First one is listening for isRouting and waiting for it to become false. This works, but only if new route has, things to load, if navigation is instant, this fails, since old content already gone before transition can start.

createRenderEffect(() => {
    console.log(
      'isRouting',
      isRouting(),
      untrack(() => isNewPage()),
    )

    if (isRouting()) {
      document.startViewTransition(async () => {
        console.log('start', isRouting(), isNewPage())

        await until(() => !isRouting())
        
        console.log('end', isRouting(), isNewPage())
      })
    }
  })

Second approach using dedicated component something similar to TransitionGroup, this works to the elements inside it, but any state outside of it, like for example overlay shown, based on route do not get captured.

Third thing I tried useBeforeLeave, but the major problem with this is that it doesn't run on window.location.back() or browser navigation in general, and it seems bit finicky because there could be multiple of them, and if one prevents navigation transition will be broken.

Given all that is there a way to use view transitions with solid router in an ergonomic way?

hasty elbow
opaque gull
#

I know there is, I even built component mimicking what it does, with view transitions, but that doesn't help me with outside state, being already done, before view transition can happen.

broken vault
#

Did you find a way?

opaque gull