diff --git a/front/packages/primitives/src/skeleton.tsx b/front/packages/primitives/src/skeleton.tsx index 7dacc764..2c29b7e8 100644 --- a/front/packages/primitives/src/skeleton.tsx +++ b/front/packages/primitives/src/skeleton.tsx @@ -50,39 +50,6 @@ export const SkeletonCss = () => ( `} ); -const AnimatedGradient = memo( - function Gradient({ color, width }: { color: string; width: SharedValue }) { - const mult = useSharedValue(-1); - const animated = useAnimatedStyle(() => ({ - transform: [ - { - translateX: width.value * mult.value, - }, - ], - })); - - useEffect(() => { - mult.value = withRepeat(withDelay(800, withTiming(1, { duration: 800 })), 0); - }); - - return ( - - ); - }, - function propsAreEqual(prev, next) { - return prev.color === next.color; - }, -); - export const Skeleton = ({ children, show: forcedShow, @@ -96,7 +63,19 @@ export const Skeleton = ({ variant?: "text" | "header" | "round" | "custom" | "fill" | "filltext"; }) => { const { css, theme } = useYoshiki(); - const width = useSharedValue(0); + const width = useSharedValue(-900); + const mult = useSharedValue(-1); + const animated = useAnimatedStyle(() => ({ + transform: [ + { + translateX: width.value * mult.value, + }, + ], + })); + + useEffect(() => { + mult.value = withRepeat(withDelay(800, withTiming(1, { duration: 800 })), 0); + }); if (forcedShow === undefined && children && children !== true) return <>{children}; @@ -165,7 +144,16 @@ export const Skeleton = ({ }, ])} > - + ))} {children}