Loading indicator

-added loader component
-updated usages

src/accession/AccessionDetailsPage.tsx

@@ -9,6 +9,7 @@ import { LocalStorageCart } from 'utilities';
 import { WithConfig } from 'config/config';
 import GrinSpecies from 'ui/common/GrinSpecies';
 import PdciTable from 'ui/common/PdciTable';
+import Loading from 'ui/common/Loading';
 
 interface IAccessionDetailsPageState {
   accession: AccessionDetails;
@@ -101,7 +102,7 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
 
     if (accession === null) {
       return (
-        <div>{ t('loading') }</div>
+        <Loading/>
       );
     } else {
       const details = accession.details;

src/accession/AccessionListPage.tsx

@@ -12,6 +12,7 @@ import { AccessionFilters } from './AccessionFilters';
 import { withTranslation, WithTranslation } from 'react-i18next';
 import { LocalStorageCart } from 'utilities';
 import { WithConfig } from 'config/config';
+import Loading from 'ui/common/Loading';
 
 interface IAccessionListPageState {
   filter: AccessionFilter;
@@ -171,7 +172,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
 
     if (accessions === null) {
       return (
-        <div>{ t('loading') }</div>
+        <Loading/>
       );
     } else {
       return (

src/accession/OverviewPage.tsx

@@ -8,6 +8,7 @@ import { AccessionService } from '@genesys/client/service';
 // UI
 import AccessionOverviewSection from './AccessionOverviewSection';
 import AccessionFilter from '@genesys/client/model/accession/AccessionFilter';
+import Loading from 'ui/common/Loading';
 
 interface IOverviewPageProps extends React.ClassAttributes<any>, WithTranslation {
   filter: AccessionFilter;
@@ -50,14 +51,15 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
       // Accession overview
       // Summary information about selected accessions
       <div>
-        { overviewData &&
-        <>
-          <h1>{t('accession.overview.title')}</h1>
-          <p>
-            { t('accession.overview.about', { count: overviewData.accessionCount, what: t('accession.model_plural', { count: overviewData.accessionCount }) }) }
-          </p>
-          <AccessionOverviewSection overview={ overviewData && overviewData.overview } />
-        </>
+        { overviewData ?
+          <>
+            <h1>{t('accession.overview.title')}</h1>
+            <p>
+              { t('accession.overview.about', { count: overviewData.accessionCount, what: t('accession.model_plural', { count: overviewData.accessionCount }) }) }
+            </p>
+            <AccessionOverviewSection overview={ overviewData && overviewData.overview } />
+          </>
+          : <Loading/>
         }
       </div>
     );

src/locales/en/translations.json

 {
-  "loading": "Loading",
+  "loading": "Loading...",
   "pag": {
     "first": "First",
     "prev": "Prev",

src/request/CartPage.tsx

@@ -6,6 +6,7 @@ import Accession from '@genesys/client/model/accession/Accession';
 import { withTranslation, WithTranslation } from 'react-i18next';
 import { LocalStorageCart } from 'utilities';
 import { Link, RouteComponentProps } from 'react-router-dom';
+import Loading from 'ui/common/Loading';
 
 interface ICartPageState {
   accessions: Array<Accession & Record<string, any>>;
@@ -169,7 +170,7 @@ class CartPage extends React.Component<ICartPageProps, ICartPageState> {
             </tbody>
           </table>
         ) }
-        { !isEmpty && !accessions && <div>{t('common.loading')}...</div> }
+        { !isEmpty && !accessions && <Loading/> }
       </>
     );
   };

src/ui/common/Loading.tsx

+import * as React from 'react';
+import { WithTranslation, withTranslation } from 'react-i18next';
+
+interface ILoadingProps extends React.ClassAttributes<any>, WithTranslation {}
+
+class Loading extends React.Component<Partial<ILoadingProps>, any> {
+  public constructor(props) {
+    super(props);
+  }
+
+  public render() {
+    const { t } = this.props
+    return (
+      <div className="d-flex justify-content-center">
+        <div className="spinner-border text-primary" role="status">
+          <span className="sr-only text-center">{t('loading')}</span>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withTranslation()(Loading);