diligent-react-ts/src/components/MUI/BackdropComponent.tsx

import React from 'react';
import { Backdrop, CircularProgress } from '@mui/material';
import { alpha } from '@mui/system';

interface BackdropComponentProps {
    position: 'absolute' | 'fixed';
    isLoading: boolean;
}

const BackdropComponent: React.FC<BackdropComponentProps> = ({ position = 'fixed', isLoading }) => (
	<Backdrop
		sx={{
            // 'fixed' takes whole page, 'absolute' takes whole space of the parent element which needs to have 'relative' position
			position,
			backgroundColor: ({ palette }) =>
				alpha(palette.background.default, palette.action.disabledOpacity),
			zIndex: ({ zIndex }) => zIndex.drawer + 1,
		}}
		open={isLoading}
	>
		<CircularProgress />
	</Backdrop>
);

export default BackdropComponent;