From 63bc3d4aa3936c32dc0ff9f4947af43033f2af98 Mon Sep 17 00:00:00 2001
From: Tom <20648924+moT01@users.noreply.github.com>
Date: Mon, 26 Feb 2024 12:22:00 -0600
Subject: [PATCH] fix(client): eyes not blinking in english animations (#53544)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
---
 .../Challenges/components/scene/scene.tsx     | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/client/src/templates/Challenges/components/scene/scene.tsx b/client/src/templates/Challenges/components/scene/scene.tsx
index dc22943aff4..ff9617f807b 100644
--- a/client/src/templates/Challenges/components/scene/scene.tsx
+++ b/client/src/templates/Challenges/components/scene/scene.tsx
@@ -3,7 +3,7 @@ import { Col } from '@freecodecamp/ui';
 import { FullScene } from '../../../../redux/prop-types';
 import { Loader } from '../../../../components/helpers';
 import ClosedCaptionsIcon from '../../../../assets/icons/closedcaptions';
-import { sounds, images, backgrounds } from './scene-assets';
+import { sounds, images, backgrounds, characterAssets } from './scene-assets';
 import Character from './character';
 
 import './scene.css';
@@ -21,11 +21,29 @@ export function Scene({ scene }: { scene: FullScene }): JSX.Element {
     new Audio(`${sounds}/${audio.filename}${audioTimestamp}`)
   );
 
+  const loadImage = (src: string | null) => {
+    if (src) new Image().src = src;
+  };
+
   // on mount
   useEffect(() => {
     const { current } = audioRef;
     current.addEventListener('canplaythrough', audioLoaded);
 
+    // preload images
+    loadImage(`${backgrounds}/${setup.background}`);
+
+    setup.characters
+      .map(({ character }) => Object.values(characterAssets[character]))
+      .flat()
+      .forEach(loadImage);
+
+    commands
+      .map(({ background }) =>
+        background ? `${backgrounds}/${background}` : null
+      )
+      .forEach(loadImage);
+
     // on unmount
     return () => {
       const { current } = audioRef;
@@ -34,7 +52,7 @@ export function Scene({ scene }: { scene: FullScene }): JSX.Element {
       current.currentTime = 0;
       current.removeEventListener('canplaythrough', audioLoaded);
     };
-  }, [audioRef]);
+  }, [audioRef, setup.background, setup.characters, commands]);
 
   const audioLoaded = () => {
     setSceneIsReady(true);