Tidy up UI for loading metadata

Author: SimonFlower

src/App.jsx

@@ -117,9 +117,7 @@ const App = () => {
       {/* Using WDC API we have 2 loading states, not 4, but visually we can keep all 4*/}
       {isLoading && (
         <Loader
-          contactsState={observatoryState}
           definitiveState={definitiveState}
-          institutesState={observatoryState}
           intermagnetState={observatoryState}
         />
       )}

src/components/Loader.jsx

@@ -32,9 +32,7 @@ const LoaderText = (props) => {
   else if (isLoading) {
     return (
       <Alert variant='info'>
-        <Spinner animation="border" role="status">
-            <span className="sr-only">Loading...</span>
-        </Spinner>
+        <Spinner animation="border" role="status" />
         <span>Downloading {item}...</span>
       </Alert>
     );
@@ -55,15 +53,11 @@ LoaderText.propTypes = {
 
 const Loader = (props) => {
   const {
-    contactsState,
-    institutesState,
     definitiveState,
     intermagnetState,
   } = props;
 
   let completed = 0;
-  completed += (contactsState.isLoading && !contactsState.isError) ? 0 : 1;
-  completed += (institutesState.isLoading && !institutesState.isError) ? 0 : 1;
   completed += (definitiveState.isLoading && !definitiveState.isError) ? 0 : 1;
   completed += (intermagnetState.isLoading && !intermagnetState.isError) ? 0 : 1;
 
@@ -80,10 +74,6 @@ const Loader = (props) => {
         </Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        <LoaderText item='contacts'
-          isLoading={contactsState.isLoading} isError={contactsState.isError} />
-        <LoaderText item='list of institutes'
-          isLoading={institutesState.isLoading} isError={institutesState.isError} />
         <LoaderText item='definitive information'
           isLoading={definitiveState.isLoading} isError={definitiveState.isError} />
         <LoaderText item='intermagnet observatory details'
@@ -99,8 +89,6 @@ const stateObject = {
 };
 
 Loader.propTypes = {
-  contactsState: PropTypes.shape(stateObject).isRequired,
-  institutesState: PropTypes.shape(stateObject).isRequired,
   definitiveState: PropTypes.shape(stateObject).isRequired,
   intermagnetState: PropTypes.shape(stateObject).isRequired,
 };