#Using FLIP Move with createServerData

6 messages · Page 1 of 1 (latest)

vast gale
#

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 much

uneven portal
#

if the the TransitionGroup is being recreated then it won't animate anything

vast gale
#

Adding 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?

uneven portal
#

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 load