React. Как установить заполнитель, пока список компонентов не будет загружен полностью?

Question

Итак, у меня есть Component, который отображает список вложенных Компонентов Cri, и моя цель состоит в том, чтобы отображать некоторые заполнители на экране, пока список Cri Компонентов не будет полностью загружен на экран.

Есть предположения?

class Comp extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoaded: true
    }
  }
  _func = () => {
    const lis = [];
    const { att, cri, media, res, st } = this.props;
    cri &&
      cri.map((row, i) => {
        var state = !row.available ? 'locked' : ''
        if (att.inProgress === false && att.itemId === row.cr && st) {
          var show = true
          state = result || state
        }
        lis.push(
          <Cri // my list of the Components Cri
            {...row}
            action={this._atte(row.cri, row.available)}
            key={i}
            mediaType={medpe}
            showOutcome={showe}
            state={state}
          />
        )
      })
    return lis
  }
  render() {
    const { isLoaded } = this.state;
    return (
      <div className="main-container">
        <div className="sub-list">
          <div>
            {this._buildCrimesList()}
          </div>
        </div>
      </div>
    )
  }
}

Answer 1

Вы можете сделать:

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

  if (!isLoaded) {
    return <div>Loading..</div>;

  return (
    <div className="main-container">
      <div className="sub-list">
        <div>
          {this._buildCrimesList()}
        </div>
      </div>
    </div>
  )
}