Updated spinners

Former-commit-id: 0b6d9d6dd551433b898a514754ee9408a3eb2968

ui/src/app/metadata/hoc/MetadataSchema.js

@@ -9,6 +9,7 @@ export const MetadataDefinitionContext = React.createContext();
 export function MetadataSchema({ type, children, wizard = false }) {
 
     const definition = React.useMemo(() => wizard ? getWizard(type) : getDefinition(type), [type, wizard]);
+    const [loading, setLoading] = React.useState(false);
 
     const { get, response } = useFetch(``, {
         cachePolicy: 'no-cache'
@@ -21,18 +22,20 @@ export function MetadataSchema({ type, children, wizard = false }) {
         if (response.ok) {
             setSchema(source);
         }
+        setLoading(false);
     }
 
     /*eslint-disable react-hooks/exhaustive-deps*/
     React.useEffect(() => {
         setSchema(null);
         loadSchema(definition);
+        setLoading(true);
     }, [definition]);
 
     return (
         <MetadataDefinitionContext.Provider value={definition}>
             {type && definition && schema &&
-                <MetadataSchemaContext.Provider value={schema}>
+                <MetadataSchemaContext.Provider value={{ schema, loading }}>
                     {children}
                 </MetadataSchemaContext.Provider>
             }
@@ -41,7 +44,13 @@ export function MetadataSchema({ type, children, wizard = false }) {
 }
 
 export function useMetadataSchemaContext () {
-    return React.useContext(MetadataSchemaContext);
+    const {schema} = React.useContext(MetadataSchemaContext);
+    return schema;
+}
+
+export function useMetadataSchemaLoading () {
+    const {loading} = React.useContext(MetadataSchemaContext);
+    return loading;
 }
 
 export function useMetadataDefinitionContext() {

ui/src/app/metadata/hoc/MetadataVersionsLoader.js

@@ -52,8 +52,8 @@ export function MetadataVersionsLoader ({versions, children}) {
 
     return (
         <React.Fragment>
-            {children(versions.map(v => list[v]).filter(v => !!v))}
             {loading && <div className="d-flex justify-content-center text-primary"><Spinner size="4x" /></div> }
+            {children(versions.map(v => list[v]).filter(v => !!v))}
         </React.Fragment>
     );
 }

ui/src/app/metadata/view/MetadataWizard.js

@@ -58,11 +58,13 @@ export function MetadataWizard ({type, data, onCallback}) {
             />
             <Wizard>
                 {type === 'source' ?
-                    <MetadataSourceWizard onSave={save} loading={loading} block={setBlocking} onShowNav={onCallback} />
+                    <React.Fragment>
+                        <MetadataSourceWizard onSave={save} loading={loading} block={setBlocking} onShowNav={onCallback} />
+                        {loading && <div className="d-flex justify-content-center text-primary col-6"><Spinner size="4x" /></div> }
+                    </React.Fragment>
                     :
                     <MetadataProviderWizard onSave={save} loading={loading} block={setBlocking} onRestart={onCallback} />
                 }
-                {loading && <div className="d-flex justify-content-center text-primary col-6"><Spinner size="4x" /></div> }
             </Wizard>
         </MetadataForm>
     );

ui/src/app/metadata/wizard/MetadataProviderWizard.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { WizardNav } from './WizardNav';
 import { MetadataWizardForm } from './MetadataWizardForm';
 import { setWizardIndexAction, useCurrentIndex, useIsLastPage, useWizardDispatcher } from './Wizard';
-import { useMetadataDefinitionContext, useMetadataDefinitionValidator, useMetadataSchemaContext } from '../hoc/MetadataSchema';
+import { useMetadataDefinitionContext, useMetadataDefinitionValidator, useMetadataSchemaContext, useMetadataSchemaLoading } from '../hoc/MetadataSchema';
 import { checkChanges, useMetadataSchema } from '../hooks/schema';
 import { useMetadataFormDispatcher, setFormDataAction, setFormErrorAction, useMetadataFormData, useMetadataFormErrors } from '../hoc/MetadataFormContext';
 import { MetadataConfiguration } from '../component/MetadataConfiguration';
@@ -12,6 +12,7 @@ import { useMetadataProviders } from '../hooks/api';
 import { removeNull } from '../../core/utility/remove_null';
 
 import { useUserGroup } from '../../core/user/UserContext';
+import Spinner from '../../core/components/Spinner';
 
 export function MetadataProviderWizard({onSave, loading, block}) {
 
@@ -20,6 +21,7 @@ export function MetadataProviderWizard({onSave, loading, block}) {
 
     const definition = useMetadataDefinitionContext();
     const schema = useMetadataSchemaContext();
+    const schemaLoading = useMetadataSchemaLoading();
 
     const processed = useMetadataSchema(definition, schema);
 
@@ -49,6 +51,7 @@ export function MetadataProviderWizard({onSave, loading, block}) {
 
     return (
         <>
+
             <div className="row mb-4">
                 <div className="col-12">
                     <WizardNav onSave={save}
@@ -57,6 +60,7 @@ export function MetadataProviderWizard({onSave, loading, block}) {
                 </div>
             </div>
             <hr />
+            {schemaLoading && <div className="d-flex justify-content-center text-primary col-6"><Spinner size="4x" /></div> }
             <div className="row">
                 <div className="col-12">
                     <MetadataWizardForm