import * as React from 'react' ; import PropTypes from 'prop-types' ; import classNames from 'classnames' ; import { useSelector } from 'react-redux' ; import { makeStyles , useTheme } from '@material-ui/core/styles' ; import CircularProgress from '@material-ui/core/CircularProgress' ; import { ReduxState , useRefreshWhenVisible } from 'ra-core' ; import RefreshIconButton from '../button/RefreshIconButton' ; import { ClassesOverride } from '../types' ; const LoadingIndicator = ( props ) => { const { classes : classesOverride , className , ... rest } = props ; useRefreshWhenVisible ( ) ; const loading = useSelector < ReduxState > ( state => state . admin . loading > 0 ) ; const classes = useStyles ( props ) ; const theme = useTheme ( ) ; return loading ? ( < CircularProgress className = { classNames ( 'app-loader' , classes . loader , className ) } color = "inherit" size = { theme . spacing ( 2 ) } thickness = { 6 } { ... rest } />) : (<RefreshIconButton className={classes.loadedIcon}/ > ) ; } ; const useStyles = makeStyles ( theme => ( { loader : { margin : theme . spacing ( 2 ) , } , loadedIcon : { } , } ) , { name : 'RaLoadingIndicator' } ) ; LoadingIndicator . propTypes = { classes : PropTypes . object , className : PropTypes . string , width : PropTypes . string , } ; interface LoadingIndicatorProps { className ? : string ; classes ? : ClassesOverride < typeof useStyles > ; } export default LoadingIndicator ;