[joy-ui] Add Backdrop component

[peacechen]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Material UI has the Backdrop component, but Joy UI does not.

Examples 🌈

https://mui.com/material-ui/react-backdrop/

Motivation 🔦

I had been using Backdrop in Material UI to overlay a spinner on the page. This isn't available with Joy UI. The docs show a backdrop prop for the Joy UI modal, but a modal isn't the right component for this case. Will this be added to Joy UI? If not, how should I replicate a spinner over the page?

[jishat]

May I do it? Please confirm for start

[siriwatknp]

@peacechen Could you share your use case for why using Modal does not work?

Here is an example of using the Modal with CircularProgress 👉 https://codesandbox.io/s/smoosh-night-8l3pgf?file=/Demo.js

[peacechen]

@siriwatknp That link returns Sandbox not found

I'm sure there's a way to implement it using a Modal but it's clunky and repetitive for everyone to make their own version.

[siriwatknp]

@siriwatknp That link returns Sandbox not found

I'm sure there's a way to implement it using a Modal but it's clunky and repetitive for everyone to make their own version.

Sorry, please check the link again. I'd wait for upvotes first because the workaround with Modal is just a few lines:

<Modal
  open={open}
  onClose={() => setOpen(false)}
  sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
>
  <CircularProgress variant="plain" />
</Modal>