Merge pull request #96 from spotify/soapraj/add-loading

add loading message

frontend/packages/plugins/create-entity/src/components/CreateEntityFormPage/CreateEntityFormPage.tsx

@@ -1,8 +1,8 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import { useRouteMatch } from 'react-router-dom';
 import { useFormik } from 'formik';
 import { Button, TextField, makeStyles } from '@material-ui/core';
-import { InfoCard } from '@backstage/core';
+import { InfoCard, Progress } from '@backstage/core';
 import { scaffolderV1 } from '@backstage/protobuf-definitions';
 const google_protobuf_struct_pb = require('google-protobuf/google/protobuf/struct_pb.js');
 // import * as google_protobuf_struct_pb from 'google-protobuf/google/protobuf/struct_pb.js';
@@ -15,6 +15,8 @@ const useStyles = makeStyles(theme => ({
 
 const CreateEntityFormPage = () => {
   const classes = useStyles();
+  const [submitting, setSubmitting] = useState(false);
+  const [componentCreated, setComponentCreated] = useState('');
   const match = useRouteMatch<{ templateId: string }>();
   const templateId = decodeURIComponent(match.params.templateId);
 
@@ -24,6 +26,7 @@ const CreateEntityFormPage = () => {
       description: '',
     },
     onSubmit: (values: any) => {
+      setSubmitting(true);
       const client = new scaffolderV1.Client('http://localhost:8080');
       const req = new scaffolderV1.CreateRequest();
       req.setComponentId(values.entityId);
@@ -36,15 +39,22 @@ const CreateEntityFormPage = () => {
       );
       req.setPrivate(false);
       client.create(req).then((res: scaffolderV1.CreateReply) => {
+        setSubmitting(false);
         console.log('COMPONENT CREATED');
         console.log(res.toObject().componentId);
+        setComponentCreated(res.toObject().componentId);
       });
     },
   });
 
+  if(submitting) {
+    return <Progress/>;
+  }
+  
   return (
     <Fragment>
       <InfoCard title={`Create New ${templateId}`}>
+        {componentCreated ? <div>{componentCreated} is created! <span role="img" aria-label="tada">🎉</span></div> :
         <form onSubmit={formik.handleSubmit}>
           <div className={classes.formGroup}>
             <TextField
@@ -73,7 +83,7 @@ const CreateEntityFormPage = () => {
               Submit
             </Button>
           </div>
-        </form>
+        </form>}
       </InfoCard>
     </Fragment>
   );