TransitionGroup animates keyed shows before Suspense-Transition is done

[katywings]

Is: Currently if a keyed <Show> is used inside of a <TransitionGroup>, and the Show value is suspense-transitioned with startTransition, the exit and enter animations will already run with old state before the Suspense-Transition is even done.

Should: Ideally the animations should only run after the Suspense-Transition.

Video:

https://github.com/solidjs-community/solid-transition-group/assets/4012401/cafa6ce5-4bd1-4f38-9ab3-cd213aa8d7a5

Playground: https://stackblitz.com/edit/github-324i4c-ubu1bo?file=src%2FApp.tsx

Versions: "solid-js": "^1.7.8", "solid-transition-group": "0.2.2"

[marvin-j97]

Here's another case, using Transition + Solid Router:

https://stackblitz.com/edit/github-324i4c-h11day?file=src%2FApp.tsx

[g-mero]

I use motion-one (which based on solid-transition-group). You should re-config every route component to make it work.

export default function App() {
  const NewFileRoutes = () => FileRoutes().map((route) => {
    return {
      ...route,
      component: (props: any) => {
        return (

          <Motion
            animate={{ opacity: [0, 1] }}
            exit={{ opacity: 0 }}
            transition={{
              duration: 0.2,
            }}
          >
            <route.component {...props} />
          </Motion>

        )
      },
    }
  })
  return (
    <Router
      root={(props) => {
        return (
          <>
            <Nav />
            <Suspense><Presence exitBeforeEnter>{props.children}</Presence></Suspense>
          </>
        )
      }}
    >
      <NewFileRoutes />
    </Router>
  )
}