fix: animation on mount wasn't happening (#4839)

src/components/Charts/AnimatedInLineChart.tsx

@@ -8,6 +8,8 @@ import { useTheme } from 'styled-components/macro'
 
 import { LineChartProps } from './LineChart'
 
+type AnimatedInLineChartProps<T> = Omit<LineChartProps<T>, 'height' | 'width' | 'children'>
+
 const config = {
   duration: 800,
   easing: easeCubicInOut,
@@ -23,10 +25,7 @@ function AnimatedInLineChart<T>({
   curve,
   color,
   strokeWidth,
-  width,
-  height,
-  children,
-}: LineChartProps<T>) {
+}: AnimatedInLineChartProps<T>) {
   const lineRef = useRef<SVGPathElement>(null)
   const [lineLength, setLineLength] = useState(0)
   const [shouldAnimate, setShouldAnimate] = useState(false)
@@ -41,18 +40,25 @@ function AnimatedInLineChart<T>({
     },
   })
 
-  const effectDependency = lineRef.current
+  // We need to check to see after the "invisble" line has been drawn
+  // what the length is to be able to animate in the line for the first time
+  // This will run on each render to see if there is a new line length
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     if (lineRef.current) {
-      setLineLength(lineRef.current.getTotalLength())
+      const length = lineRef.current.getTotalLength()
+      if (length !== lineLength) {
+        setLineLength(length)
+      }
+      if (length > 0 && !shouldAnimate && !hasAnimatedIn) {
         setShouldAnimate(true)
       }
-  }, [effectDependency])
+    }
+  })
   const theme = useTheme()
   const lineColor = color ?? theme.accentAction
 
   return (
-    <svg width={width} height={height}>
     <Group top={marginTop}>
       <LinePath curve={curve} x={getX} y={getY}>
         {({ path }) => {
@@ -82,8 +88,6 @@ function AnimatedInLineChart<T>({
         }}
       </LinePath>
     </Group>
-      {children}
-    </svg>
   )
 }
 

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -263,6 +263,10 @@ export function PriceChart({ width, height, prices }: PriceChartProps) {
    * making it unacceptable for shorter durations / smaller variances.
    */
   const curveTension = timePeriod === TimePeriod.HOUR ? 1 : 0.9
+
+  const getX = useMemo(() => (p: PricePoint) => timeScale(p.timestamp), [timeScale])
+  const getY = useMemo(() => (p: PricePoint) => rdScale(p.value), [rdScale])
+  const curve = useMemo(() => curveCardinal.tension(curveTension), [curveTension])
   return (
     <>
       <ChartHeader>
@@ -279,16 +283,15 @@ export function PriceChart({ width, height, prices }: PriceChartProps) {
           message={prices && prices.length === 0 ? <NoV3DataMessage /> : <MissingDataMessage />}
         />
       ) : (
+        <svg width={width} height={graphHeight}>
           <AnimatedInLineChart
             data={prices}
-          getX={(p: PricePoint) => timeScale(p.timestamp)}
-          getY={(p: PricePoint) => rdScale(p.value)}
+            getX={getX}
+            getY={getY}
             marginTop={margin.top}
-          curve={curveCardinal.tension(curveTension)}
+            curve={curve}
             strokeWidth={2}
-          width={width}
-          height={graphHeight}
-        >
+          />
           {crosshair !== null ? (
             <g>
               <AxisBottom
@@ -348,7 +351,7 @@ export function PriceChart({ width, height, prices }: PriceChartProps) {
             onMouseMove={handleHover}
             onMouseLeave={resetDisplay}
           />
-        </AnimatedInLineChart>
+        </svg>
       )}
       <TimeOptionsWrapper>
         <TimeOptionsContainer>