Using FLIP Move with createServerData
I'm building a page that displays ranked results users can vote on. I pull the data from the routeData using
createServerData. From there, I listen to a websocket to know when another user has made a change, and then refetch the routeData using refetchRouteData().
I feed the results of the route data into a different component that displays the results in order of rank. In this Results component I wrap the list in a <TransitionGroup> component from solid-flip. This animates nicely when new records are added and removed, but doesn't animate them nicely if they are rearranged. Instead I just get a sudden re-rendering of the results. I'm hoping to understand why the reordering animation doesn't work. I'm not sure if it's an issue with how I have it setup, or if it is a result of the data coming from createServerData. Any insight would be very helpful.
Thank you very much4 Replies
if the the
TransitionGroup is being recreated then it won't animate anythingAdding and Removing items follows the same render flow. Those get animated.
So I guess it seems to be recreating the TransitionGroup on rearrangement of the array?
can't think of any other reason
if you can't prevent it from happening you can try adding the
initial prop
but that will also cause it to animate on initial loadThat's a good insight. Thank you very much