React preloader before app loads?

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">
    <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="" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="">
      You need to enable JavaScript to run this app.
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="">

    <!-- Compiled and minified JavaScript -->
    <script src=""></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>

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) {
    this.state = {
      loading: true

  componentDidMount = async () => {
    this.loaderTimeOut().then(() => {
        loading: false

  render() {
    const { loading } = this.state
    if (loading) {
      return null
    return (
      <div className="App">
        <Header />
        <GifList />

  loaderTimeOut = () => {
    return new Promise((resolve) => {
      setTimeout(() => resolve(), 2500)

Nevermind, I got it. I needed the preloader outside of the root in index.html.