CSSTransition and React Suspense - Flashing behavior after new data gets loaded and suspense remount child.. #671
Description
If you use Suspense with CSSTransition there is flash of old state in case data of suspended component changed and old component gets remounted after was suspended..
Behavior:
1 Page gets render for first time...
2 I change some input in suspense child (re-fetch graph data which will put component to suspense....)
3 Component gets suspended
4 New data gets fetched
5 Component gets remounted with new data and hire:
6 Old state of CSSTransitions flash for short-time and new data data gets rendered....
If i use exit={false} on transposition it is working.... (but i disable by this exit transition...) so it is some state between suspense of component and old transition state... I try to change top Keys of react component to render new component but no luck...
Expected:
If exit transition must be apply than after suspense start not after suspense remount child back..
Example top component:
<Suspense fallback={<UserProjectsPlaceholder />}>
<UserProjects />
</Suspense>
Example suspense child:
<Container>
<TransitionGroup component={null} className="flex ">
{
pagination.data?.connectedProjects?.edges?.map(
(entity, index) => {
return (
entity.node && (
<CSSTransition
key={index}
timeout={150}
appear
classNames="listview-transition"
>
<div className="flex w-full max-w-full pb-05 mx-1 ">
.... Child component
</div>
</CSSTransition>
)
);
}
)
</TransitionGroup>
</Container>
Example:
Version:
"react-transition-group": "^4.4.1",