Как сделать загрузочную анимацию с реакции- bootstrap

Question

Я хочу сделать загрузочную анимацию с response- bootstrap, ожидая вызова API. Я знаю, как мне установить состояние, чтобы запускать и останавливать его, я просто не знаю, как это сделать с response- bootstrap. Я думаю, что я должен использовать Overlay (для эффекта "затухания") и Spinner, но не уверен, как.

Спасибо!

Answer 1

Вы можете достичь этого разными способами. Один очень простой способ с условным рендерингом: где загрузка - это ваше состояние во время выборки ...

{loading?<YourComponent/>:<Spinner animation="border" role="status">
  <span className="sr-only">Loading...</span>
</Spinner>}

Answer 2

https://react-bootstrap.netlify.app/components/spinners/#spinners. После запроса через api вы можете использовать этот компонент, пока компоненты не будут загружены. Вот так: // Прежде всего импортируем реагировать - bootstrap Компонент Spinner

import {Spinner} из 'response- bootstrap'; и напишите так --->

state = {
  exampleArray : [],
  loading : false
}

componentDidMount(){
   this.setState({
     ...this.state,
     loading: true
   })
   this.fetchItems(url);
};

fetchItems = (url) => {
   fetch(url)
   .then(response => response.json())
   .then((data) => {
    this.setState({
    loading:false,
    exampleArray : [...this.state.exampleArray, data]
   })
   })
}

render(){
return(
    {loading ? <Spinner /> : 
     exampleArray.map((arr)=> {
      return (
        <YourComponent 
          dataName : {arr.dataName}
          ............ you can pass what you want as a props

       />
      )
    })
    }



)

}

И вы можете искать анимацию: анимация. css библиотека. очень прост в использовании