So react-admin seems to have a feature where if you’re idle for a little while and come back it will reload the data, presumably to make sure you’re looking at the most up to date version of a record.
This is causing some issues for my editing feature that has some custom components. Is there a way to disable this auto-reload feature?
Advertisement
Answer
The auto-refresh is triggered by the loading indicator (the spinner icon that you see in the top right part of the app bar).
You can disable the auto-refresh by replacing the loading indicator by your own.
import * as React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { useSelector } from 'react-redux'; import { makeStyles } from '@material-ui/core/styles'; import CircularProgress from '@material-ui/core/CircularProgress'; import { useRefreshWhenVisible, RefreshIconButton } from 'react-admin'; const useStyles = makeStyles( { loader: { margin: 14, }, loadedIcon: {}, }, { name: 'RaLoadingIndicator' } ); const LoadingIndicator = props => { const { classes: classesOverride, className, ...rest } = props; useRefreshWhenVisible(); // <= comment this line to disable auto-refresh const loading = useSelector(state => state.admin.loading > 0); const classes = useStyles(props); return loading ? ( <CircularProgress className={classNames('app-loader', classes.loader, className)} color="inherit" size={18} thickness={5} {...rest} /> ) : ( <RefreshIconButton className={classes.loadedIcon} /> ); }; LoadingIndicator.propTypes = { classes: PropTypes.object, className: PropTypes.string, width: PropTypes.string, }; export default LoadingIndicator;
You’ll also need to put this button in a custom AppBar, inject your AppBar in a custom Layout, and use that Layout in your Admin, as explained in the react-admin Theming documentation.