execute-when-unresponsive.js

import React from 'react';
import ReactDOM from 'react-dom';
import { waitAtLeast } from 'promise-frites';

//...
class SignInScreen extends React.Component {
  state = {
    isLoading: false,
    loadingText: "Please wait",
  }
  render() {
    const shortDelay = 0.5; // seconds
    const notifyUserOnLongRequest = executeWhenUnresponsive({
      [shortDelay]: () => this.setState({ loadingText: 'Hold on!' }),
      [shortDelay * 2]: () => this.setState({ loadingText: 'Almost there!' }),
      [shortDelay * 10]: () => this.setState({ loadingText: 'For some reason this takes some time!' }),
    });

    const onSignIn = () => Promise.resolve()
      .then(() => this.setState({ isLoading: true }))
      .then(notifyUserOnLongRequest(this.props.onSignIn)
      .then(() => this.setState({ isLoading: false }))
      .catch(() => this.setState({ isLoading: false }))
    
    if (this.state.isLoading) { return <Loading text={ this.state.loadingText }/>; }
    return (
     <div>
       <button onClick={ onSignIn }>SignIn</button>
     </div>
    );
  }
}
//...