Как вы показываете контент до того, как запрос будет обработан с помощью React?

Есть несколько способов справиться с этим (я считаю, что это называется «ленивая загрузка»).

Вот один способ.

Предполагая, что вы используете метод загрузки данных из вашего API на основе Promise, я бы сделал следующее:

1. В конструкторе компонентов установите this.state = { loading: true }.
2. Объявите и инициализируйте два стилевых объекта: const normalStyles = {}, const greyStyles = {} с выбранными вами ключами / значениями CSS.
3. В каждом <p> или любых других элементах, которые вы хотите изменить, добавьте опору style, например style = {this.state.loading ? greyStyles : normalStyles}.
4. Когда ваше обещание исполнится, позвоните в this.setState({loading: false}).

Если бы мне пришлось делать это самому, я бы создал два компонента - один «настоящий» компонент, а второй будет служить заполнителем для будущего контента:

//this component is like a loader, it will display silver square blocks in place of content that is not yet present.
const SectionPlaceholder = () => (
  <section>
   <span className = "avatar-placeholder" />
   <span className = "gray-bar" />
   <span className = "gray-bar" />
  </section>
)

//this components is a "real" component that will render data when they're available
const Section = (props) => (
  <section>
    <img src = {props.user.image} />
    <p>{props.user.username}</p>
    <p>{props.user.user_email}</p> 
  </section>
)

Теперь, имея эти два компонента и зная, что данные будут доступны в какой-то момент в будущем, мы можем просто показывать заполнители, пока данные не будут получены:

render() {
  return (
    <div>
      {this.props.userData ?
        <Section user = {this.props.userData} />
        :
        <SectionPlaceholder />
      }
    </div>
  )
}

Это должно дать вам желаемый эффект.

Я бы, вероятно, создал компонент, который выглядел бы как снимок экрана, который вы указали в вопросе, или изображение, которое выглядит так, в зависимости от того, что вы предпочитаете. И сделай что-нибудь подобное.

state = {
  isFetching: true,
  data: {},
  isError: false
}

componentDidMount() {
  //doing the fetch
  fetch('api').then(
    response => {
       this.setState({ data: response.json(), isFetching: false });//finish with fetch
    },
    error => {
       this.setState({ isError: true, isFetching: false });//finish with fetch but error
    }
  );
}

render() {
  if (this.state.isFetching)
    return <CustomLoadingComponent />;


  return(
    <div>
      whatever you wanna show!
    </div>
  )
}

Итак, если он загружается, загрузите пользовательский компонент загрузки, когда данные вернутся, делайте все, что хотите.