Add a couple loading spinners

awslabs · Mar 24, 2020 · ff4bc3e · ff4bc3e
1 parent ea7f390
commit ff4bc3e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 13 deletions.
diff --git a/dev-portal/src/pages/Admin/ApiManagement.jsx b/dev-portal/src/pages/Admin/ApiManagement.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Button, Table, Modal, Form, Message, Popup, Icon } from 'semantic-ui-react'
+import { Button, Loader, Table, Modal, Form, Message, Popup, Icon } from 'semantic-ui-react'
 
 import { apiGatewayClient } from 'services/api'
 import { getApi } from 'services/api-catalog'
@@ -34,7 +34,8 @@ export const ApiManagement = observer(class ApiManagement extends React.Componen
     super(props)
     this.state = {
       modalOpen: false,
-      errors: []
+      errors: [],
+      apisUpdating: []
     }
 
     this.fileInput = React.createRef()
@@ -232,9 +233,23 @@ export const ApiManagement = observer(class ApiManagement extends React.Componen
     })
   }
 
+  isUpdatingApiGatewayApi (api) {
+    return this.state.apisUpdating.includes(`${api.id}_${api.stage}`)
+  }
+
   updateApiGatewayApi (api) {
+    // Simpler than implementing a multiset, and probably also faster.
+    this.setState(({ apisUpdating }) => ({
+      apisUpdating: [...apisUpdating, `${api.id}_${api.stage}`]
+    }))
     apiGatewayClient()
       .then(app => app.post('/admin/catalog/visibility', {}, { apiKey: `${api.id}_${api.stage}`, subscribable: `${api.subscribable}` }, {}))
+      .then(() => this.setState(({ apisUpdating }) => {
+        const index = apisUpdating.indexOf(`${api.id}_${api.stage}`)
+        const newApisUpdating = apisUpdating.slice()
+        newApisUpdating.splice(index, 1)
+        return { apisUpdating: newApisUpdating }
+      }))
   }
 
   isSdkGenerationConfigurable (api) {
@@ -395,7 +410,7 @@ export const ApiManagement = observer(class ApiManagement extends React.Componen
                 style={{ width: '100%' }}
                 onClick={() => this.updateApiGatewayApi(api)}
               >
-              Update
+                {this.isUpdatingApiGatewayApi(api) ? <Loader active inline size='mini' /> : 'Update'}
               </Button>
             </Table.Cell>
             <Table.Cell>

diff --git a/dev-portal/src/pages/Dashboard.jsx b/dev-portal/src/pages/Dashboard.jsx
@@ -92,16 +92,23 @@ export default observer(() => {
       <Grid.Row>
         <Grid.Column style={{ paddingTop: '40px' }}>
           <Header size='medium'>API Key</Header>
-          <code style={{
-            background: 'black',
-            border: '1px solid gray',
-            padding: '7px 8px',
-            color: 'lightgray',
-            borderRadius: '5px'
-          }}
-          >
-            {store.apiKey}
-          </code>
+          {
+            store.apiKey
+              ? (
+                <code style={{
+                  background: 'black',
+                  border: '1px solid gray',
+                  padding: '7px 8px',
+                  color: 'lightgray',
+                  borderRadius: '5px'
+                }}
+                >
+                  {store.apiKey}
+                </code>
+              )
+              // Note: this should be the same size as the text
+              : <Loader active inline size='tiny' />
+          }
         </Grid.Column>
       </Grid.Row>
       <Divider />