How to load preloader by fetch api and make it disappear after receiving data?

Question

React

I want to load the preloader while the apishka is loading and make it disappear after receiving
the data. But I can't

import React,{useState}  from 'react';

import axios from 'axios';
import backImg from '../image/illustration (3).png'
import Plan from './Plan/Plan';
import Error from './Error'
import SpeedInfo from './SpeedInfo'
const Speed = ()=>{
    const [weatherData,setWeatherData]=useState({})
    const [city,setCity]=useState('')
    const [load,setLoad]=useState(false)
    const speedSubmit=(e)=>{
    e.preventDefault()
    setLoad(true)
    axios(`https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${city}`).then(({data}) => {
    console.log(data)    
    return setWeatherData(data);
    }).catch(() => {
        setWeatherData({...weatherData,error:true})
    })
};
  
    

const inputHandler = (e) => {
    console.log(e.target.value);
    setCity(e.target.value)
};

    return(
        <div>         
<div className='speed'>
<div className='speed_check'>
<div className='speed_title'>Check Your Website Speed </div>
    <div className='speed_text'>
    Distinctively exploit optimal alignments for intuitive bandwidth.
Quickly coordinate e-business through revolutionary.
    </div>
    <form   onSubmit={speedSubmit} className='speed_form'>
            <input type='url' placeholder='WEB URL'  onChange={inputHandler}/>
            <button type='submit' className='speed_btn'>Submit</button>
    </form>
    {(Object.entries(weatherData).length === 0) ? '' : weatherData.error ? <Error/> :
                <SpeedInfo weatherData={weatherData} load={load} setLoad={setLoad} />
            }
</div>
<div className='speed_img'> 
    <img src={backImg}/>
</div>
</div>
<Plan/>
        </div>
    )
}
export default Speed

component to appear after loader:

import React from 'react';
import './Speed.css';


const SpeedInfo = ({weatherData,load,setLoad}) => {
        console.log(weatherData.id)
    return (
       
      <div>
       {load === false?'loading':false}
  
<div className='speed_info_ofwebsite'>
            <div>
                <h5>Results: </h5>
              <div>  <div className='site_name'><strong > Website url: </strong> <a className='link' href="#">{weatherData.id}</a></div>
                <div className='site_name' id='speed_of'><strong className='website_speeed'> Website speed: </strong><span className='speed_website_cat'> {weatherData.loadingExperience.metrics.CUMULATIVE_LAYOUT_SHIFT_SCORE.category}</span></div>
                </div>
              <div><div className='site_name'><strong> Version:</strong> {weatherData.lighthouseResult.configSettings.formFactor}</div>
                <div className='site_name'><strong> Total elements: </strong> {weatherData.lighthouseResult.audits['dom-size'].displayValue}</div>
               </div>
             <div>
               <div className='site_name'><strong> Website was displayed in : </strong> {weatherData.lighthouseResult.audits['speed-index'].displayValue}</div>
                <div className='site_name'><strong> Website size: </strong> {weatherData.lighthouseResult.audits['total-byte-weight'].displayValue}</div>

             </div>
                       </div>
            </div> 
      </div>
            
    );
};

export default SpeedInfo;

Answer 1

Add another load state, which is true by default.
Make it false after the request.
P.S. React 18 will be released soon and there it will already be possible to freely use suspense and all that))
https://ru.reactjs.org/docs/concurrent-mode-suspen...