I put the Backdrop directly in the component and it all works, but in order to reuse it (and given the nature of react) I created a custom hook with the Backdrop. I encountered the problem that passing the same value as before (in this case, isLoading), it is always set as opened, for some reason I don't undertand. This is the hook I created:
import {CircularProgress,Backdrop} from '@mui/material';
import { useEffect, useState } from 'react';
export default function MyLoad(isLoading){
const [loading,setLoading] = useState(false);
useEffect(()=>{
setLoading(isLoading);
console.log(loading); //returns false as expected
},isLoading);
return (
<Backdrop
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1,paddingLeft:"250px"}}
open={loading} //its behaviour is as "opened" even loading is false
>
<CircularProgress color="primary" />
</Backdrop>
);
}
While in the parent component, as simple as:
<MyLoad isLoading={isLoading}/>
In fact as stated, I also used the intermediate value const [loading,setLoading] = useState(false); that I believe is not necessary ir order to discard any problem I may not be aware of, but the result is the same.
