You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
857 B
JavaScript
36 lines
857 B
JavaScript
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).catch(console.error.bind(console))
|
|
|
|
// In case of failure - just launch the darn thing without images
|
|
// after 10 seconds
|
|
setTimeout(onLoad, 10000)
|
|
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
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
|
|
})
|
|
}
|