From a4b9907eb1182205228c47e77f3fe500affb7076 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Thu, 8 Sep 2022 15:24:34 -0700
Subject: [PATCH] Added spinner

---
 ui/src/app/core/components/Spinner.js       |  4 +--
 ui/src/app/metadata/hoc/MetadataSelector.js | 28 +++++++++++++++------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/ui/src/app/core/components/Spinner.js b/ui/src/app/core/components/Spinner.js
index 880f53d2a..c137bb9ac 100644
--- 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;
\ No newline at end of file
diff --git a/ui/src/app/metadata/hoc/MetadataSelector.js b/ui/src/app/metadata/hoc/MetadataSelector.js
index b81db74b2..54a49d4df 100644
--- 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>
     );
 }