Merge pull request #652 from smiclea/edit-menu-loading

Show loading icon in replica details actions menu

src/components/molecules/ActionDropdown/ActionDropdown.tsx

@@ -23,6 +23,7 @@ import { List, ListItems, Tip } from '../DropdownLink/DropdownLink'
 
 import StyleProps from '../../styleUtils/StyleProps'
 import Palette from '../../styleUtils/Palette'
+import StatusIcon from '../../atoms/StatusIcon/StatusIcon'
 
 const Wrapper = styled.div<any>`
   position: relative;
@@ -60,6 +61,7 @@ export type Action = {
   disabled?: boolean,
   hidden?: boolean,
   title?: string | null,
+  loading?: boolean
 }
 export type Props = {
   label: string,
@@ -175,7 +177,7 @@ class ActionDropdown extends React.Component<Props, State> {
             title={action.title}
             large={this.props.largeItems}
           >
-            {action.label}
+            {action.label}{action.loading ? <StatusIcon style={{ marginLeft: '4px', opacity: 0.3 }} status="RUNNING" /> : ''}
           </ListItem>
         ))}
       </ListItems>

src/components/pages/ReplicaDetailsPage/ReplicaDetailsPage.tsx

@@ -69,6 +69,7 @@ type State = {
   confirmationItem?: ReplicaItemDetails | null | Execution | null,
   showCancelConfirmation: boolean,
   isEditable: boolean,
+  isEditableLoading: boolean,
   pausePolling: boolean,
   initialLoading: boolean,
 }
@@ -85,6 +86,7 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
     showCancelConfirmation: false,
     showForceCancelConfirmation: false,
     isEditable: false,
+    isEditableLoading: true,
     pausePolling: false,
     initialLoading: true,
   }
@@ -206,7 +208,7 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
       && !!targetProviderTypes.types.find(t => t === providerTypes.TARGET_UPDATE)
       : false
 
-    this.setState({ isEditable })
+    this.setState({ isEditable, isEditableLoading: false })
   }
 
   async loadReplicaWithInstances(options: {
@@ -570,6 +572,7 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
         title: editTitle,
         action: () => { this.handleReplicaEditClick() },
         disabled: !this.state.isEditable,
+        loading: this.state.isEditableLoading,
       },
       {
         label: 'Delete Disks',