Как загрузить содержимое панели только после перехода на неё?

Question

[mosikus]

Есть у меня несколько панелей. На одной из них расположено очень много контента. При переходе на нее сначала ничего не происходит 1-1.5 сек, только затем осуществляется переход. Можно как то сделать, чтобы контент на панели прогрузился только после того, как я перейду на неё (спиннер навесить на пару секунд )? То есть, мне нужен моментальный переход.

Answer 1

[vlad_kopylov]

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>
}

Comments

[mosikus]

Подскажите, зачем нужно
className={`spinner${isLoading ? "" : " d-none"}` ?

[vlad_kopylov]

durak22212, можно и так
<div className=`spinner`>

Просто нашел пример с проекта)

[mosikus]

vlad_kopylov, не помогает. Точно так же при нажатии ожидание в 1-1.5 сек, потом переход на панель. Спиннер да, ставил свой.

[vlad_kopylov]

durak22212, залей рабочий код на codesandbox - я посмотрю

[mosikus]

Спасибо за ответ. Я проверил, оно работает (но мою проблему не решает).