How to make a preloader in React when loading a large background image?

Question

JavaScript

There is a small react application (one page). On the background there is a picture with a high resolution (rather bold even after optimizations). How to make the preloader show up until all the resources on the page have loaded?
I tried to play with life cycles in the main component, but it still does not wait for the picture, even if it is imported directly into the component

Answer 1

here's a pretty cute crutch:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  // fake authentication Promise
  authenticate(){
    return new Promise(resolve => setTimeout(resolve, 2000))
  }

  componentDidMount(){
    this.authenticate().then(() => {
      const ele = document.getElementById('ipl-progress-indicator')
      if(ele){
        // fade out
        ele.classList.add('available')
        setTimeout(() => {
          // remove from DOM
          ele.outerHTML = ''
        }, 2000)
      }
    })
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

https://github.com/nguyenbathanh/react-loading-scr...

Answer 2

Here it is briefly described. Here is the link " Animated preloader on ReactJS. "