I have the app waiting a few seconds before everything is loaded, yet I can’t show the preloader. I tried adding it in index.html in the root:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Project</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div id="root">
<div class="preloader-wrapper small active">
<div class="spinner-layer spinner-green-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</body>
</html>
The css with .empty:
.preloader-wrapper:empty {
position: absolute;
}
and app.js…what am I missing?
import React, { Component } from 'react'
import Header from '../header/header'
import GifList from '../gif-list/gifList'
import './App.css'
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
...this.state,
loading: true
}
}
componentDidMount = async () => {
this.loaderTimeOut().then(() => {
this.setState({
loading: false
})
})
}
render() {
const { loading } = this.state
if (loading) {
return null
}
return (
<div className="App">
<Header />
<GifList />
</div>
)
}
loaderTimeOut = () => {
return new Promise((resolve) => {
setTimeout(() => resolve(), 2500)
})
}
}