Beginning of CircleSnail animation is choppy

[zeckdude]

Hi there,

Great work on this package. We're using the CircleSnail component. The beginning of the animation is choppy and at some point it becomes smooth. Unfortunately, we're playing the animation for only showing the component for 1.5 seconds and during that time, the animation never gets smooth. Is there anything we can do to fix this issue?

Here's my code:

<CircleSnail
  direction="clockwise"
  duration={500}
  spinDuration={2000}
  color={Colors.white}
  size={27}
  indeterminate
  thickness={2}
/>

This is an animated gif of the 1.5 second spinner:

For comparison, I saved an animated gif of the 10 second spinner with the choppiness at the beginning and then getting smooth after about 1.5 second:

[zeckdude]

I figured out the issue. I have BE requests running the background which slow down the animation. Still not sure how to solve it though.

[kesha-antonov]

@zeckdude Hello! Did you solve this?

[zeckdude]

No :(

It's still slow. I tried to use shouldComponentUpdate to limit the amount of re-renders, but it's still choppy.

[ddthuan87]

adding key={1} to View that wrapper of CircleSnail, this stop reRender.