Hanging Skeleton animation reference

[ealmiladi]

Description

Skeleton leaves animations hanging in the background

CodeSandbox/Snack link

None

Steps to reproduce

if (!isLoaded) {
    Animated.loop(pulse).start()
    return (
      <Animated.View
        style={{ opacity: pulseAnim }}
        className={`${startColor} ${skeletonStyle({
          variant,
          class: className,
        })}`}
        {...props}
        ref={ref}
      />
    )
  } else {
    Animated.loop(pulse).stop()

    return children
  }

It's possible that the Skeleton component is used conditionally; for example:
{showSkeleton && <Skeleton/>}

With how the current implementation is written, the Animation loop would start, but never actually stop, because the component unmounted. This leaves a hanging animation reference, causing downstream issues (this impacted e2e, as Detox constantly waited for the animation to complete, but would never).

gluestack-ui Version

2

Platform

• Expo
• React Native CLI
• Next
• Web
• Android
• iOS

Other Platform

No response

Additional Information

No response