Show loading in `ChooseProvider` and `Endpoint`

Show loading animation while providers are being loaded into
`ChooseProvider` modal.
Show loading animation while provider's connection info schema is loaded
 into `Endpoint` modal.

QA note: Throttle browser's network connection speed to see it in action.

src/components/organisms/ChooseProvider/ChooseProvider.jsx

@@ -16,7 +16,7 @@ import React from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
 
-import { EndpointLogos, Button } from 'components'
+import { EndpointLogos, Button, StatusImage } from 'components'
 
 import StyleProps from '../../styleUtils/StyleProps'
 
@@ -24,6 +24,7 @@ const Wrapper = styled.div`
   padding: 22px 0 32px 0;
   text-align: center;
 `
+const Providers = styled.div``
 const Logos = styled.div`
   display: flex;
   flex-wrap: wrap;
@@ -37,21 +38,45 @@ const EndpointLogosStyled = styled(EndpointLogos) `
     transform: scale(0.7);
   }
 `
+const LoadingWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 32px 0;
+`
+const LoadingText = styled.div`
+  font-size: 18px;
+  margin-top: 32px;
+`
 
 class ChooseProvider extends React.Component {
   static propTypes = {
     providers: PropTypes.object,
     onCancelClick: PropTypes.func,
     onProviderClick: PropTypes.func,
+    loading: PropTypes.bool,
   }
 
-  render() {
-    if (!this.props.providers) {
+  renderLoading() {
+    if (!this.props.loading) {
       return null
     }
 
     return (
-      <Wrapper>
+      <LoadingWrapper>
+        <StatusImage loading />
+        <LoadingText>Loading providers ...</LoadingText>
+      </LoadingWrapper>
+    )
+  }
+
+  renderProviders() {
+    if (!this.props.providers || this.props.loading) {
+      return null
+    }
+
+    return (
+      <Providers>
         <Logos>
           {Object.keys(this.props.providers).map(k => {
             return (
@@ -65,6 +90,15 @@ class ChooseProvider extends React.Component {
           })}
         </Logos>
         <Button secondary onClick={this.props.onCancelClick}>Cancel</Button>
+      </Providers>
+    )
+  }
+
+  render() {
+    return (
+      <Wrapper>
+        {this.renderProviders()}
+        {this.renderLoading()}
       </Wrapper>
     )
   }

src/components/organisms/Endpoint/Endpoint.jsx

@@ -17,7 +17,7 @@ import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import connectToStores from 'alt-utils/lib/connectToStores'
 
-import { EndpointLogos, EndpointField, Button, StatusIcon, LoadingButton, CopyButton, Tooltip } from 'components'
+import { EndpointLogos, EndpointField, Button, StatusIcon, LoadingButton, CopyButton, Tooltip, StatusImage } from 'components'
 import NotificationActions from '../../../actions/NotificationActions'
 import EndpointStore from '../../../stores/EndpointStore'
 import EndpointActions from '../../../actions/EndpointActions'
@@ -87,6 +87,17 @@ const StatusError = styled.div`
     margin-left: 4px;
   }
 `
+const Content = styled.div``
+const LoadingWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 32px 0;
+`
+const LoadingText = styled.div`
+  font-size: 18px;
+  margin-top: 32px;
+`
 
 class Endpoint extends React.Component {
   static propTypes = {
@@ -400,17 +411,13 @@ class Endpoint extends React.Component {
     return button
   }
 
-  render() {
-    if (this.props.endpointStore.validation && this.props.endpointStore.validation.valid
-      && !this.closeTimeout) {
-      this.closeTimeout = setTimeout(() => {
-        this.props.onCancelClick({ autoClose: true })
-      }, 2000)
+  renderContent() {
+    if (this.props.providerStore.connectionSchemaLoading) {
+      return null
     }
 
     return (
-      <Wrapper>
-        <EndpointLogos style={{ marginBottom: '16px' }} height={128} endpoint={this.getEndpointType()} />
+      <Content>
         {this.renderEndpointStatus()}
         <Fields>
           {this.renderFields(this.props.providerStore.connectionInfoSchema)}
@@ -421,6 +428,36 @@ class Endpoint extends React.Component {
           <Button large secondary onClick={() => { this.handleCancelClick() }}>Cancel</Button>
           {this.renderActionButton()}
         </Buttons>
+      </Content>
+    )
+  }
+
+  renderLoading() {
+    if (!this.props.providerStore.connectionSchemaLoading) {
+      return null
+    }
+
+    return (
+      <LoadingWrapper>
+        <StatusImage loading />
+        <LoadingText>Loading connection schema ...</LoadingText>
+      </LoadingWrapper>
+    )
+  }
+
+  render() {
+    if (this.props.endpointStore.validation && this.props.endpointStore.validation.valid
+      && !this.closeTimeout) {
+      this.closeTimeout = setTimeout(() => {
+        this.props.onCancelClick({ autoClose: true })
+      }, 2000)
+    }
+
+    return (
+      <Wrapper>
+        <EndpointLogos style={{ marginBottom: '16px' }} height={128} endpoint={this.getEndpointType()} />
+        {this.renderContent()}
+        {this.renderLoading()}
       </Wrapper>
     )
   }

src/components/organisms/PageHeader/PageHeader.jsx

@@ -175,6 +175,7 @@ class PageHeader extends React.Component {
           <ChooseProvider
             onCancelClick={() => { this.handleCloseChooseProviderModal() }}
             providers={this.props.providerStore.providers}
+            loading={this.props.providerStore.providersLoading}
             onProviderClick={providerName => { this.handleProviderClick(providerName) }}
           />
         </Modal>

src/components/pages/EndpointsPage/EndpointsPage.jsx

@@ -251,6 +251,7 @@ class EndpointsPage extends React.Component {
           <ChooseProvider
             onCancelClick={() => { this.handleCloseChooseProviderModal() }}
             providers={this.props.providerStore.providers}
+            loading={this.props.providerStore.providersLoading}
             onProviderClick={providerName => { this.handleProviderClick(providerName) }}
           />
         </Modal>

src/stores/ProviderStore.js

@@ -18,13 +18,16 @@ import ProviderActions from '../actions/ProviderActions'
 class ProviderStore {
   constructor() {
     this.connectionInfoSchema = []
+    this.connectionSchemaLoading = false
     this.providers = null
     this.providersLoading = false
     this.optionsSchema = []
     this.optionsSchemaLoading = false
 
     this.bindListeners({
+      handleGetConnectionInfoSchema: ProviderActions.GET_CONNECTION_INFO_SCHEMA,
       handleGetConnectionInfoSchemaSuccess: ProviderActions.GET_CONNECTION_INFO_SCHEMA_SUCCESS,
+      handleGetConnectionInfoSchemaFailed: ProviderActions.GET_CONNECTION_INFO_SCHEMA_FAILED,
       handleLoadProviders: ProviderActions.LOAD_PROVIDERS,
       handleLoadProvidersSuccess: ProviderActions.LOAD_PROVIDERS_SUCCESS,
       handleLoadOptionsSchema: ProviderActions.LOAD_OPTIONS_SCHEMA,
@@ -33,10 +36,19 @@ class ProviderStore {
     })
   }
 
+  handleGetConnectionInfoSchema() {
+    this.connectionSchemaLoading = true
+  }
+
   handleGetConnectionInfoSchemaSuccess(schema) {
+    this.connectionSchemaLoading = false
     this.connectionInfoSchema = schema
   }
 
+  handleGetConnectionInfoSchemaFailed() {
+    this.connectionSchemaLoading = false
+  }
+
   handleLoadProviders() {
     this.providers = null
     this.providersLoading = true