Now puts up a loading overlay over the onboarding create form

Author: tobuck-aws

client/web/src/onboarding/OnboardingCreateContainer.js

@@ -17,6 +17,7 @@
 import React, { useEffect, useState } from 'react'
 import { useHistory } from 'react-router-dom'
 
+import LoadingOverlay from '@ronchalant/react-loading-overlay'
 import OnboardingFormComponent from './OnboardingFormComponent'
 import {
   createOnboarding,
@@ -25,40 +26,23 @@ import {
   selectErrorName,
 } from './ducks'
 import { useDispatch, useSelector } from 'react-redux'
-import { selectConfig, fetchConfig } from '../settings/ducks'
-import {
-  fetchPlans,
-  selectAllPlans,
-  selectPlanLoading,
-  selectPlanError,
-} from '../billing/ducks'
+import { selectConfig } from '../settings/ducks'
+import { selectAllPlans } from '../billing/ducks'
 import { saveToPresignedBucket } from '../settings/ducks'
 import { selectAllTiers } from '../tier/ducks'
-export default function OnboardingCreateContainer(props) {
+
+export default function OnboardingCreateContainer() {
   const dispatch = useDispatch()
   const history = useHistory()
-
-  const loading = useSelector(selectLoading)
+  const config = useSelector(selectConfig)
   const error = useSelector(selectError)
   const errorName = useSelector(selectErrorName)
-
-  const config = useSelector(selectConfig)
-
-  const loadingPlans = useSelector(selectPlanLoading)
-  const errorPlans = useSelector(selectPlanError)
-  const tiers = useSelector(selectAllTiers)
+  const loading = useSelector(selectLoading)
   const plans = useSelector(selectAllPlans)
+  const tiers = useSelector(selectAllTiers)
 
   const [file, setFile] = useState({})
 
-  useEffect(() => {
-    const billingPlansResponse = dispatch(fetchPlans())
-  }, [dispatch])
-
-  useEffect(() => {
-    const fetchConfigResponse = dispatch(fetchConfig())
-  }, [dispatch])
-
   const nullBlankProps = (obj) => {
     const ret = { ...obj }
     Object.keys(ret).forEach((key) => {
@@ -107,16 +91,18 @@ export default function OnboardingCreateContainer(props) {
   }
 
   return (
-    <OnboardingFormComponent
-      billingPlans={plans}
-      cancel={cancel}
-      config={config}
-      error={error}
-      errorName={errorName}
-      loading={loading}
-      onFileSelected={handleFileSelected}
-      submit={submitOnboardingRequestForm}
-      tiers={tiers}
-    />
+    <LoadingOverlay active={!loading} spinner text="Loading...">
+      <OnboardingFormComponent
+        billingPlans={plans}
+        cancel={cancel}
+        config={config}
+        error={error}
+        errorName={errorName}
+        loading={loading}
+        onFileSelected={handleFileSelected}
+        submit={submitOnboardingRequestForm}
+        tiers={tiers}
+      />
+    </LoadingOverlay>
   )
 }

client/web/src/settings/ApplicationContainer.js

@@ -46,15 +46,15 @@ export function ApplicationContainer(props) {
   const LINUX = 'LINUX'
 
   const dispatch = useDispatch()
-  const settings = useSelector(selectAllSettings)
-  const loading = useSelector(selectLoading)
   const appConfig = useSelector(selectConfig)
-  const dbOptions = useSelector(selectDbOptions)
-  const osOptions = useSelector(selectOsOptions)
+  const configError = useSelector(selectConfigError)
   const configLoading = useSelector(selectConfigLoading)
   const configMessage = useSelector(selectConfigMessage)
-  const configError = useSelector(selectConfigError)
+  const dbOptions = useSelector(selectDbOptions)
+  const loading = useSelector(selectLoading)
+  const osOptions = useSelector(selectOsOptions)
   const serviceToS3BucketMap = useSelector(selectServiceToS3BucketMap)
+  const settings = useSelector(selectAllSettings)
 
   const hasTenants = useSelector((state) => {
     return selectAllTenants(state)?.length > 0