Fix small UI/UX issues in Wizard Options page

Fixes an issue where some fields in wizard options page may appear, in
some circumstances, in the wrong column, leaving an empty space where it
should actually be.

Fixes an issue where the Next button would show "Loading", when options
were loading, but the user presses the back button and is no longer in
the options page.

src/components/organisms/WizardOptions/WizardOptions.tsx

@@ -419,36 +419,40 @@ class WizardOptions extends React.Component<Props> {
     })
 
     const groups = this.generateGroups(fields)
-
     return (
       <Fields ref={this.props.onScrollableRef} padding={this.props.layout === 'page' ? null : 32}>
-        {groups.map((g, i) => (
-          <CSSTransitionGroup
-            key={g.name || 0}
-            transitionName={i > 0 ? 'field-group-transition' : ''}
-            transitionAppear
-            transitionAppearTimeout={250}
-            in={false}
-          >
-            <Group>
-              {g.name ? (
-                <GroupName>
-                  <GroupNameBar />
-                  <GroupNameText>{LabelDictionary.get(g.name)}</GroupNameText>
-                  <GroupNameBar />
-                </GroupName>
-              ) : null}
-              <GroupFields>
-                <Column left>
-                  {g.fields.map(f => f.column === 0 && f.component)}
-                </Column>
-                <Column right>
-                  {g.fields.map(f => f.column === 1 && f.component)}
-                </Column>
-              </GroupFields>
-            </Group>
-          </CSSTransitionGroup>
-        ))}
+        {groups.map((g, i) => {
+          const getColumnInGroup = (field: any, fieldIndex: number) => (
+            g.name ? fieldIndex % 2 : field.column
+          )
+          return (
+            <CSSTransitionGroup
+              key={g.name || 0}
+              transitionName={i > 0 ? 'field-group-transition' : ''}
+              transitionAppear
+              transitionAppearTimeout={250}
+              in={false}
+            >
+              <Group>
+                {g.name ? (
+                  <GroupName>
+                    <GroupNameBar />
+                    <GroupNameText>{LabelDictionary.get(g.name)}</GroupNameText>
+                    <GroupNameBar />
+                  </GroupName>
+                ) : null}
+                <GroupFields>
+                  <Column left>
+                    {g.fields.map((f, j) => (getColumnInGroup(f, j) === 0 && f.component))}
+                  </Column>
+                  <Column right>
+                    {g.fields.map((f, j) => getColumnInGroup(f, j) === 1 && f.component)}
+                  </Column>
+                </GroupFields>
+              </Group>
+            </CSSTransitionGroup>
+          )
+        })}
       </Fields>
     )
   }

src/components/pages/WizardPage/WizardPage.tsx

@@ -598,8 +598,8 @@ class WizardPage extends React.Component<Props, State> {
   }
 
   shouldShowLoadingButton() {
-    return providerStore.destinationOptionsSecondaryLoading
-      || providerStore.sourceOptionsSecondaryLoading
+    return (wizardStore.currentPage.id === 'dest-options' && providerStore.destinationOptionsSecondaryLoading)
+      || (wizardStore.currentPage.id === 'source-options' && providerStore.sourceOptionsSecondaryLoading)
   }
 
   scheduleReplica(replica: ReplicaItem): Promise<void> {