How to load the contents of the panel only after switching to it?

Question

React

I have several panels. One of them has a lot of content. When you switch to it, at first nothing happens for 1-1.5 seconds, only then the transition is made. Can I do something so that the content on the panel is loaded only after I go to it (hang the spinner for a couple of seconds)? That is, I need an instant transition.

Answer 1

constructor(props){
  super(props)
  this.state={
  isLoading: true;
}

async componentDidMount(){
  //invoke api 
  this.setState({isLoading:false})
}

}
render(){
        const {isLoading} = this.state;

        if (isLoading) {
            return (
                <div className={`spinner${isLoading ? "" : " d-none"}`}>
                    <Spinner fontSize={84} type="loading-3-quarters" />
                </div>
            );
        }

        return (
            <React.Fragment>
                ...................
            </React.Fragment>
}