Image preload

src/components/App/App.js

@@ -7,8 +7,10 @@ import {Provider as LoadProvider} from '../../hooks/useLoadGame'
 import useLocalStorage from '../../hooks/useLocalStorage'
 
 import backgroundURL from './background.png'
+import Loader from '../Loader/Loader';
 
 function App({promptVisible, onCommand, game}) {
+  const [loading, setLoading] = useState(true)
   const [state, setState] = useState({messages: []})
 
   const {width, height} = useWindowSize()
@@ -24,6 +26,9 @@ function App({promptVisible, onCommand, game}) {
     game.saveDraft()
   }, [game])
 
+  if(loading)
+    return <Loader onLoad={() => setLoading(false)}/>
+
   return (
     <StateProvider value={state}>
       <LoadProvider value={game.loadGame.bind(game)}>

src/components/Loader/Loader.js

@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react'
+
+import styles from './Loader.module.css'
+
+import background from '../App/background.png'
+import map from '../Modals/map.png'
+import mapPerson from '../Modals/mapPerson.svg'
+
+const images = [background, map, mapPerson]
+
+export default function Loader({onLoad}) {
+  useEffect(() => {
+    Promise.all(images.map(preloadImage)).then(onLoad)
+  }, [])
+
+  return (
+    <div className={styles.container}>
+      <p>Loading...</p>
+    </div>
+  );
+}
+
+function preloadImage(url) {
+  return new Promise((res, rej) => {
+    const img = new Image();
+    img.onload = res
+    img.onerror = rej
+
+    img.src = url
+  })
+}