preload images

src/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Designer from './componens/designer'
 import Editor from './componens/editor'
+import { tshirts } from './componens/tshirtcolor'
 
 const initial = {
   direction: 'front',
@@ -42,9 +43,9 @@ function App() {
   })
   const elStage = React.useRef();
 
-  React.useEffect(() => {
-    // console.log(tshirt)
-  }, [tshirt])
+  // React.useEffect(() => {
+  //   // console.log(tshirt)
+  // }, [])
 
   const checkDeselect = e => {
     // deselect when clicked on empty area
@@ -61,15 +62,27 @@ function App() {
     })
   }
 
+  React.useEffect(() => {
+
+  }, [])
+
   React.useEffect(() => {
     if (!appLoaded) {
-      // console.log('app loaded')
-      setAppLoaded(true)
-      let fisrtLoad = document.getElementById("fisrtLoad")
-      fisrtLoad.classList.add("fade-out")
-      setTimeout(() => {
-        fisrtLoad.style.display = "none"
-      }, 500)
+      // preload images
+      tshirts.forEach((pic) => {
+        const image = new Image()
+        image.src = pic
+        image.onload = () => {
+          // hide loading when images loaded
+          // console.log('image loaded')
+          setAppLoaded(true)
+          let fisrtLoad = document.getElementById("fisrtLoad")
+          fisrtLoad.classList.add("fade-out")
+          setTimeout(() => {
+            fisrtLoad.style.display = "none"
+          }, 500)
+        }
+      })
     }
   }, [appLoaded, setAppLoaded])
 

src/componens/tshirtcolor.js

@@ -4,7 +4,10 @@ import white_back from '../assets/tshirt/white/back.png'
 import black_front from '../assets/tshirt/black/front.png'
 import black_back from '../assets/tshirt/black/back.png'
 
+export const tshirts = [white_front, white_back, black_front, black_back]
+
 export default function TshirtView({ color, direction }) {
+
     switch (color) {
         case 'black':
             if (direction === 'front') {