Added spinner

TIER · Sep 8, 2022 · a4b9907 · a4b9907
1 parent d5018e7
commit a4b9907
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/ui/src/app/core/components/Spinner.js b/ui/src/app/core/components/Spinner.js
@@ -2,8 +2,8 @@ import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 
-export function Spinner ({ size, className }) {
-    return (<FontAwesomeIcon icon={faSpinner} size={size} spin={true} pulse={true} className={ className } />)
+export function Spinner (props) {
+    return (<FontAwesomeIcon icon={faSpinner} spin={true} pulse={true} { ...props } />)
 }
 
 export default Spinner;
diff --git a/ui/src/app/metadata/hoc/MetadataSelector.js b/ui/src/app/metadata/hoc/MetadataSelector.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useLocation, useParams } from 'react-router';
+import Spinner from '../../core/components/Spinner';
 import { useMetadataEntity } from '../hooks/api';
 
 export const MetadataTypeContext = React.createContext();
@@ -10,6 +11,7 @@ export const MetadataLoaderContext = React.createContext();
 export function MetadataSelector({ children, ...props }) {
 
     let { type, id } = useParams();
+    const [loading, setLoading] = React.useState(false);
     const location = useLocation();
 
     if (!type) {
@@ -30,25 +32,35 @@ export function MetadataSelector({ children, ...props }) {
         const source = await get(`/${id}`);
         if (response.ok) {
             setMetadata(source);
+            setLoading(false);
         }
     }
 
     function reload() {
+        setLoading(true);
         loadMetadata(id);
+
     }
 
     React.useEffect(() => reload(), [id]);
 
     return (
-        <MetadataLoaderContext.Provider value={ reload }>
-        {type &&
-            <MetadataTypeContext.Provider value={type}>
-                {metadata && metadata.version &&
-                    <MetadataObjectContext.Provider value={metadata}>{children(metadata, reload)}</MetadataObjectContext.Provider>
+        <React.Fragment>
+            {loading && <div className="d-flex justify-content-center text-primary">
+                <Spinner size="4x" className="m-4" />
+            </div> }
+            <MetadataLoaderContext.Provider value={ reload }>
+                {type &&
+                    <MetadataTypeContext.Provider value={type}>
+                        {metadata && metadata.version &&
+                            <MetadataObjectContext.Provider value={metadata}>
+                                {children(metadata, reload)}
+                            </MetadataObjectContext.Provider>
+                        }
+                    </MetadataTypeContext.Provider>
                 }
-            </MetadataTypeContext.Provider>
-        }
-        </MetadataLoaderContext.Provider>
+            </MetadataLoaderContext.Provider>
+        </React.Fragment>
     );
 }