From 01273fb5bc89392996368f028fc3ead092e3b3f5 Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Thu, 2 Jan 2025 23:49:41 +0300
Subject: [PATCH] fix: donation svg animation (#57867)

---
 client/src/components/Donation/donation-modal-body.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Donation/donation-modal-body.tsx b/client/src/components/Donation/donation-modal-body.tsx
index 63d7d430f79..6537a3a1b85 100644
--- a/client/src/components/Donation/donation-modal-body.tsx
+++ b/client/src/components/Donation/donation-modal-body.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useFeature } from '@growthbook/growthbook-react';
 import { Col, Row, Modal, Spacer } from '@freecodecamp/ui';
@@ -129,7 +129,9 @@ const AnimationContainer = ({
 }: {
   secondsRemaining: number;
 }) => {
+  const animationKey = useRef(Date.now()).current;
   const newBearAnimation = useFeature('new-bear-animation').on;
+  const animationSrc = `${newBearAnimation ? donationAnimationB : donationAnimation}?t=${animationKey}`;
   const { t } = useTranslation();
   return (
     <>
@@ -174,9 +176,9 @@ const AnimationContainer = ({
           )}
         </div>
         <img
-          key={Date.now()}
+          key={animationKey}
           alt=''
-          src={newBearAnimation ? donationAnimationB : donationAnimation}
+          src={animationSrc}
           id={'donation-animation'}
           data-playwright-test-label='donation-animation'
         />