Looading indicator

src/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { 
-  Heading, IconButton, StarIcon, Pane, TextInput, Text
+  Heading, IconButton, StarIcon, Pane, TextInput, Text, Spinner
 } from 'evergreen-ui'
 
 import './App.css';
@@ -17,10 +17,15 @@ class Form extends React.Component {
 
   handleSubmit(event) {
     event.preventDefault();
+    this.setState({
+      loading: true,
+    });
+
     if (!event.target.checkValidity()) {
     	this.setState({
         invalid: true,
         displayErrors: true,
+        loading: false,
       });
       return;
     }
@@ -36,15 +41,16 @@ class Form extends React.Component {
           invalid: false,
           displayErrors: false,
           name: form_data.get('meeting-name'),
-          meetingid: data.id
+          meetingid: data.id,
+        loading: false,
         })
-        console.log(this.state.meetingid)
+        console.log('Meeting ID: ' + this.state.meetingid)
       })
       .catch(console.log);
   }
 
   render() {
-  	const { name, meetingid, invalid, displayErrors } = this.state;
+  	const { name, meetingid, invalid, loading, displayErrors } = this.state;
     return (
     	<div>
         <form
@@ -60,13 +66,18 @@ class Form extends React.Component {
             placeholder="YourMeetingNameHere"
             required
           />
-          <IconButton icon={StarIcon} height={60} onClick={this.onClick}/>
+          {!loading && (
+            <IconButton icon={StarIcon} height={60} onClick={this.onClick}/>
+          )}
         </form>
 
         <div className="res-block">
           {invalid && (
             <Pane><Text>Form is not valid</Text></Pane>
           )}
+          {loading && (
+            <Spinner marginX="auto" />
+          )}
           {!invalid && name && (
           	<div>
               <h3>Copy Pasta</h3>