Commit bd189637 authored by Maksym Tishchenko's avatar Maksym Tishchenko Committed by Matija Obreza
Browse files

Loading indicator

-added loader component
-updated usages
parent 7ae85c89
......@@ -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;
......
......@@ -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 (
......
......@@ -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>
);
......
{
"loading": "Loading",
"loading": "Loading...",
"pag": {
"first": "First",
"prev": "Prev",
......
......@@ -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/> }
</>
);
};
......
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);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment