content: import React, { Component } from 'react';
  import { observer } from 'mobx-react';
  import styled from 'styled-components';
  import Clipboard from 'clipboard';
  import Overlay from '../common/Overlay';
  import Loader from '../common/Loader';
  import SecureMessage from '../../stores/SecureMessage';
  import MessageUrl from './MessageUrl';
  
  const Text = styled.h2`
    font-family: 'Work Sans', sans-serif;
    color: #fff;
    margin-bottom: -72px;
  `;
  
  @observer
  class SubmissionLoader extends Component {
    constructor(props) {
      super(props);
      this.message = SecureMessage;
    }
  
    renderLoadingText() {
      // if submission is happening
      if (this.message.isSubmitting) {
        // todo: make the loader screen first show that we are encrypting the message and then
        // we show that we are sending the message.
        return <Text>Sending encrypted message...</Text>;
      }
  
      // if should show the message url
      if (this.message.showMessageUrl) {
        // eslint-disable-next-line no-new
        new Clipboard('#copy-link-button');
        return <MessageUrl url={this.message.messageUrl} />;
      }
  
      return <Text>Loading...</Text>;
    }
  
    render() {
      return (
        <Overlay isActive={this.props.isActive}>
          {this.renderLoadingText()}
          <Loader isActive={this.message.isWorking} />
        </Overlay>
      );
    }
  }
  
  export default SubmissionLoader;
  