Show loading button in Wizard Options

While the first set of options from 'destination-options' API call are
being loaded, a big Loading animation is displayed.

While the second set of options are being loaded, if the user is on
'Simple' tab, he may not notice them loading and thus may not know why
the 'Next' button is disabled.

This commit fixes this issue by display a 'Loading ...' animated button
while the second set of options are being loaded, instead of the
disabled 'Next' button.

src/components/organisms/WizardPageContent/WizardPageContent.tsx

@@ -51,6 +51,7 @@ import networkStore from '../../../stores/NetworkStore'
 import migrationArrowImage from './images/migration'
 import { ProviderTypes } from '../../../@types/Providers'
 import minionPoolStore from '../../../stores/MinionPoolStore'
+import LoadingButton from '../../molecules/LoadingButton/LoadingButton'
 
 const Wrapper = styled.div<any>`
   ${StyleProps.exactWidth(`${parseInt(StyleProps.contentWidth, 10) + 64}px`)}
@@ -182,6 +183,7 @@ type Props = {
   hasSourceOptions: boolean,
   pages: WizardPage[],
   uploadedUserScripts: InstanceScript[],
+  showLoadingButton: boolean,
   onTypeChange: (isReplicaChecked: boolean | null) => void,
   onBackClick: () => void,
   onNextClick: () => void,
@@ -563,11 +565,15 @@ class WizardPageContent extends React.Component<Props, State> {
           />
           <EndpointLogos height={32} endpoint={targetEndpoint} />
         </IconRepresentation>
-        <Button
-          onClick={this.props.onNextClick}
-          disabled={this.isNextButtonDisabled()}
-        >{isLastPage ? 'Finish' : 'Next'}
-        </Button>
+        {this.props.showLoadingButton ? (
+          <LoadingButton>Loading ...</LoadingButton>
+        ) : (
+          <Button
+            onClick={this.props.onNextClick}
+            disabled={this.isNextButtonDisabled()}
+          >{isLastPage ? 'Finish' : 'Next'}
+          </Button>
+        )}
       </Navigation>
     )
   }

src/components/pages/WizardPage/WizardPage.tsx

@@ -597,6 +597,11 @@ class WizardPage extends React.Component<Props, State> {
     return state
   }
 
+  shouldShowLoadingButton() {
+    return providerStore.destinationOptionsSecondaryLoading
+      || providerStore.sourceOptionsSecondaryLoading
+  }
+
   scheduleReplica(replica: ReplicaItem): Promise<void> {
     if (wizardStore.schedules.length === 0) {
       return Promise.resolve()
@@ -659,6 +664,7 @@ class WizardPage extends React.Component<Props, State> {
               storageMap={wizardStore.storageMap}
               schedules={wizardStore.schedules}
               nextButtonDisabled={this.isNextButtonDisabled()}
+              showLoadingButton={this.shouldShowLoadingButton()}
               type={this.state.type}
               onTypeChange={isReplica => { this.handleTypeChange(isReplica) }}
               onBackClick={() => { this.handleBackClick() }}