feat(fe): preload tutorial media files

frontend/src/customHooks/usePrealoadMedia.ts

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+
+/*
+  This hook is used to preload media files.
+  
+  When images are fetched again the cached media files
+  will be used.
+*/
+export const usePrealoadMedia = (media: string[]) => {
+    useEffect(() => {
+        media
+          .forEach((_, i) => {
+            new Image().src = media[i];
+          });
+      }, [media]);
+}

frontend/src/modules/Workplace/tutorial/index.tsx

@@ -42,6 +42,7 @@ import media4 from "./assets/v3/stage_4.gif";
 import media5 from "./assets/v3/stage_5.gif";
 import media6 from "./assets/v3/stage_6.gif";
 import media7 from "./assets/v3/stage_7.webp";
+import { usePrealoadMedia } from "../../../customHooks/usePrealoadMedia";
 
 const media = [media1, media2, media3, media4, media5, media6, media7];
 
@@ -52,7 +53,11 @@ interface TutorialProps {
 
 const Tutorial = ({ tutorialOpen, setTutorialOpen }: TutorialProps) => {
   const [stageIndex, setStageIndex] = useState(0);
-
+
+  // preload tutorial media files
+  // so they are fetched before opening the tutorial
+  usePrealoadMedia(media);
+
   useEffect(() => {
     if (tutorialOpen) {
       setStageIndex(0);
@@ -216,14 +221,6 @@ const Tutorial = ({ tutorialOpen, setTutorialOpen }: TutorialProps) => {
     },
   ];
 
-  useEffect(() => {
-    Array(stages.length)
-      .fill(0)
-      .forEach((_, i) => {
-        new Image().src = `./assets/v3/stage_${i + 1}`;
-      });
-  }, [stages.length]);
-
   const currentStage = stages[stageIndex];
 
   const handleKeyPress = useCallback(