Added loading component to indicate that more buttons are loading.

monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/AWSRunButton.js

@@ -5,6 +5,7 @@ import {faCloud} from '@fortawesome/free-solid-svg-icons';
 import AWSRunInstances from './AWSRunInstances';
 import NextSelectionButton from '../../ui-components/inline-selection/NextSelectionButton';
 import {Alert, Button} from 'react-bootstrap';
+import LoadingIcon from '../../ui-components/LoadingIcon';
 
 
 function AWSRunButton(props) {
@@ -14,6 +15,7 @@ function AWSRunButton(props) {
   const [isOnAWS, setIsOnAWS] = useState(false);
   const [AWSInstances, setAWSInstances] = useState([]);
   const [awsMachineCollectionError, setAwsMachineCollectionError] = useState('');
+  const [componentLoading, setComponentLoading] = useState(true);
 
   useEffect(() => {
     checkIsOnAWS();
@@ -24,7 +26,7 @@ function AWSRunButton(props) {
       .then(res => res.json())
       .then(res => {
         let isAws = res['is_aws'];
-
+        setComponentLoading(false);
         if (isAws) {
           // On AWS!
           // Checks if there was an error while collecting the aws machines.
@@ -64,6 +66,9 @@ function AWSRunButton(props) {
   }
 
   let displayed = '';
+  if (componentLoading) {
+    displayed = LoadingIcon();
+  }
   if (awsMachineCollectionError !== '') {
     displayed = getErrorDisplay();
   } else if (isOnAWS) {

monkey/monkey_island/cc/ui/src/components/ui-components/LoadingIcon.js

@@ -0,0 +1,9 @@
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faSync} from '@fortawesome/free-solid-svg-icons';
+import React from 'react';
+
+function LoadingIcon() {
+  return <FontAwesomeIcon icon={faSync} className={`spinning-icon loading-icon`} />
+}
+
+export default LoadingIcon;

monkey/monkey_island/cc/ui/src/styles/components/Icons.scss

@@ -1,3 +1,10 @@
+.loading-icon {
+  color: $monkey-yellow;
+  font-size: 20px;
+  margin-left: 50%;
+  margin-right: 50%;
+}
+
 .spinning-icon {
   animation: spin-animation 0.5s infinite;
   display: inline-block;