Skip to content
This repository has been archived by the owner on Dec 13, 2023. It is now read-only.

Exit transition occurs too early when used with suspense. #6

Closed
minht11 opened this issue Nov 24, 2021 · 2 comments
Closed

Exit transition occurs too early when used with suspense. #6

minht11 opened this issue Nov 24, 2021 · 2 comments

Comments

@minht11
Copy link

minht11 commented Nov 24, 2021

When using TransitionGroup and solid-app-router with suspense and lazy components exit transition occurs too early.

This is regression, the last working version was 0.7.5.

Reproduction
See when clicking link that transition occurs instantly despite route still being lazily loaded. Transition should not occur until new route is ready.

Sample code:

const HomeLazy = lazy(async () => {
  await wait(1000)

  return { default: () => <div>Home</div> }
})

const ROUTES = [
  {
    path: "/",
    component: () => <div>Base</div>
  },
  {
    path: "/home",
    component: HomeLazy
  }
];
...
<Suspense>
    <TransitionGroup
      enter={animateEnter({
        keyframes: {
          opacity: [0, 1],
        },
        options: { duration: 2000, easing: 'linear' },
      })}
      exit={animateExit({
        keyframes: {
          opacity: [1, 0],
        },
        options: { duration: 2000, easing: 'linear' },
      })}
    >
      <Routes />
    </TransitionGroup>
  </Suspense>
@otonashixav
Copy link
Owner

I'd have to dig into how suspense works in order to fix this; seems that createComputed ignores(?) suspense. Here's a workaround that hopefully doesn't introduce any issues: https://codesandbox.io/s/tender-bell-kxtuv?file=/index.js

otonashixav added a commit that referenced this issue Dec 2, 2021
Unsure if this breaks anything, but based on my understanding it shouldn't outside of some very edge cases (setting the TransitionGroup children then expecting the TG to update before effects run)

closes issue #6
@otonashixav
Copy link
Owner

Fixed in 0.10.3

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants