SwitchLoading.js

// @flow
import * as React from 'react'

class Maybe extends React.Component<{
  flag: boolean,
  children?: React.Node,
  else: React.Node,
}> {
  render() {
    const { props } = this

    return props.flag ? props.children : props.else
  }
}

const Loading = () => <div>Loading...</div>

class SwitchLoading extends React.Component<{
  isLoading: boolean,
  children?: React.Node,
}> {
  render() {
    const { props } = this

    return (
      <Maybe flag={props.isLoading} else={<Loading />}>
        {props.children}
      </Maybe>
    )
  }
}

const MyComponent = () => <h2>Hello World</h2>

class App extends React.Component<{}, { isLoading: boolean }> {
  state = { isLoading: false }

  componentDidMount() {
    setTimeout(() => {
      this.finishLoading()
    }, 2000)
  }

  finishLoading = () => {
    this.setState({ isLoading: true })
  }

  render() {
    const { state } = this

    return (
      <div className="App">
        <SwitchLoading isLoading={state.isLoading}>
          <MyComponent />
        </SwitchLoading>
      </div>
    )
  }
}

export default App