React component for displaying a loading overlay with a spinner using MUI's CircularProgress.

PendingOverlay.tsx

import {CircularProgress} from '@mui/material';
import {FC, PropsWithChildren} from 'react';

interface PendingOverlayProps {
    isPending: boolean;
}

export const PendingOverlay: FC<PropsWithChildren<PendingOverlayProps>> = ({
    isPending,
    children
}) => {
    return (
        <div className="relative w-full h-full">
            {children}
            {isPending ? (
                <div className="absolute inset-0 z-10 bg-muted/50 flex justify-center items-center">
                    <CircularProgress />
                </div>
            ) : null}
        </div>
    );
};