Added spinner to history pages

TIER · Jul 15, 2022 · 6694ec4 · 6694ec4
1 parent 4388dfa
commit 6694ec4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/ui/src/app/metadata/hoc/MetadataVersionsLoader.js b/ui/src/app/metadata/hoc/MetadataVersionsLoader.js
@@ -4,12 +4,15 @@ import { getMetadataPath } from '../hooks/api';
 import API_BASE_PATH from '../../App.constant';
 import useFetch from 'use-http';
 import { last } from 'lodash';
+import Spinner from '../../core/components/Spinner';
 
 export function MetadataVersionsLoader ({versions, children}) {
 
     const ref = React.useRef({});
     const [list, setList] = React.useState({});
 
+    const [loading, setLoading] = React.useState(false);
+
     const { type, id } = useParams();
 
     const { get, response } = useFetch(`/${API_BASE_PATH}${getMetadataPath(type)}/${id}/Versions`, {
@@ -22,6 +25,8 @@ export function MetadataVersionsLoader ({versions, children}) {
             addToList(v, l);
             if (last(versions) !== v) {
                 loadNext(versions[versions.indexOf(v) + 1]);
+            } else {
+                setLoading(false);
             }
         }
     }
@@ -36,14 +41,19 @@ export function MetadataVersionsLoader ({versions, children}) {
 
     function loadNext (v) {
         loadVersion(v);
+
     }
 
     /*eslint-disable react-hooks/exhaustive-deps*/
     React.useEffect(() => {
         loadNext(versions[0]);
+        setLoading(true);
     }, [versions]);
 
-    return (<React.Fragment>
-        {children(versions.map(v => list[v]).filter(v => !!v))}
-    </React.Fragment>);
+    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> }
+        </React.Fragment>
+    );
 }
diff --git a/ui/src/app/metadata/view/MetadataHistory.js b/ui/src/app/metadata/view/MetadataHistory.js
@@ -9,6 +9,7 @@ import Translate from '../../i18n/components/translate';
 import { useMetadataHistory } from '../hooks/api';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUndo } from '@fortawesome/free-solid-svg-icons';
+import Spinner from '../../core/components/Spinner';
 
 const sortVersionsByDate = (versions) => {
     return versions.sort((a, b) => {
@@ -107,16 +108,13 @@ export function MetadataHistory () {
                         )}
                     </tbody>
                 </table>
+                {loading && <div className="d-flex justify-content-center text-primary"><Spinner size="4x" /></div> }
                 <Button variant="primary" onClick={ () => compare(selected) } disabled={!selected.length}>
                     <Translate value="label.compare-selected">Compare Selected</Translate>
                     {selected.length > 0 && <span>({ selected.length })</span> }
                 </Button>
                 </>
             </div>}
-            {loading && <div className="d-flex justify-content-center">
-                <i className="fa fa-spinner fa-pulse fa-4x fa-fw"></i>
-                <span className="sr-only">Loading...</span>
-            </div>}
         </>
     );
 }
diff --git a/ui/src/app/metadata/view/MetadataWizard.js b/ui/src/app/metadata/view/MetadataWizard.js
@@ -8,6 +8,7 @@ import { useMetadataEntity } from '../hooks/api';
 import { createNotificationAction, NotificationTypes, useNotificationDispatcher } from '../../notifications/hoc/Notifications';
 import { Prompt, useHistory } from 'react-router-dom';
 import { useTranslator } from '../../i18n/hooks';
+import Spinner from '../../core/components/Spinner';
 
 export function MetadataWizard ({type, data, onCallback}) {
 
@@ -61,6 +62,7 @@ export function MetadataWizard ({type, data, onCallback}) {
                     :
                     <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>
     );