diff --git a/openbis_ng_ui/src/js/components/common/grid/Grid.jsx b/openbis_ng_ui/src/js/components/common/grid/Grid.jsx index f6623fedf45b4667c9a271f772f3b73ef029a369..6c0f66ee7689524156595ddd7e752d906627af36 100644 --- a/openbis_ng_ui/src/js/components/common/grid/Grid.jsx +++ b/openbis_ng_ui/src/js/components/common/grid/Grid.jsx @@ -27,6 +27,9 @@ const styles = theme => ({ loadingContainer: { flex: '1 1 auto' }, + loading: { + display: 'inline-block' + }, header: { paddingBottom: 0 }, @@ -142,7 +145,7 @@ class Grid extends React.PureComponent { )} </div> <div className={classes.loadingContainer}> - <Loading loading={loading}> + <Loading loading={loading} styles={{ root: classes.loading }}> <div className={classes.tableContainer} onClick={this.handleClickTable} diff --git a/openbis_ng_ui/src/js/components/common/loading/Loading.jsx b/openbis_ng_ui/src/js/components/common/loading/Loading.jsx index 64071993c185775fa80ba2dc8cdd96e41d899b0e..273707861d8f7087cf07330fe591c1080d8ac602 100644 --- a/openbis_ng_ui/src/js/components/common/loading/Loading.jsx +++ b/openbis_ng_ui/src/js/components/common/loading/Loading.jsx @@ -10,10 +10,10 @@ class Loading extends React.Component { render() { logger.log(logger.DEBUG, 'Loading.render') - const { loading, children } = this.props + const { loading, styles, children } = this.props return ( - <Mask visible={loading} icon={<CircularProgress />}> + <Mask visible={loading} styles={styles} icon={<CircularProgress />}> {children} </Mask> ) diff --git a/openbis_ng_ui/src/js/components/common/loading/Mask.jsx b/openbis_ng_ui/src/js/components/common/loading/Mask.jsx index dcdc76c72dc2bcc1bec870452029fa49dd4e9467..baa1d1fa26aa034f4ab8d62a9a8321e0e6a121ca 100644 --- a/openbis_ng_ui/src/js/components/common/loading/Mask.jsx +++ b/openbis_ng_ui/src/js/components/common/loading/Mask.jsx @@ -1,10 +1,11 @@ import React from 'react' import { withStyles } from '@material-ui/core/styles' +import util from '@src/js/common/util.js' import logger from '@src/js/common/logger.js' const styles = theme => ({ container: { - display: 'inline-block', + display: 'block', minWidth: '100%', height: '100%', position: 'relative' @@ -30,10 +31,10 @@ class Mask extends React.Component { render() { logger.log(logger.DEBUG, 'Mask.render') - const { visible, icon, children, classes } = this.props + const { visible, icon, children, styles = {}, classes } = this.props return ( - <div className={classes.container}> + <div className={util.classNames(classes.container, styles.root)}> {visible && ( <React.Fragment> <div className={classes.mask}></div>