diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/AWSRunButton.js b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/AWSRunButton.js index f176ba0b5..42f16c614 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/AWSRunButton.js +++ b/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) { diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/LoadingIcon.js b/monkey/monkey_island/cc/ui/src/components/ui-components/LoadingIcon.js new file mode 100644 index 000000000..465ec7044 --- /dev/null +++ b/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 +} + +export default LoadingIcon; diff --git a/monkey/monkey_island/cc/ui/src/styles/components/Icons.scss b/monkey/monkey_island/cc/ui/src/styles/components/Icons.scss index ed75d8a9d..7f8eadf05 100644 --- a/monkey/monkey_island/cc/ui/src/styles/components/Icons.scss +++ b/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;