ui-state.js

import React from 'react';
import ReactDOM from 'react-dom';

const createActions = () => {
  const signIn = () => new Promise((resolve) => {
    setTimeout(resolve, 1000)
  });
  
  return { signIn };
};

const Loading = () => {
  return (
    <div>Loading...<div>
  )
}

class SignInScreen extends React.Component {
  state = {
    isLoading: false
  }
  render() {
    const onSignIn = () => Promise.resolve()
      .then(() => this.setState({ isLoading: true }))
      .then(() => this.props.onSignIn())
      .then(() => this.setState({ isLoading: false }))
      .catch(() => this.setState({ isLoading: false }))
    
    if (this.state.isLoading) { return <Loading />; }
    return (
     <div>
       <button onClick={ onSignIn }>SignIn</button>
     </div>
    );
  }
}

const actions = createActions();
ReactDOM.render(
  <SignInScreen onSignIn={ actions.signIn } />
  document.getElementById('root')
);