search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.14k stars 32.35k forks source link

[joy-ui] Add `Backdrop` component #38591

Open peacechen opened 1 year ago

peacechen commented 1 year ago

Duplicates

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 commented 1 year ago

May I do it? Please confirm for start

siriwatknp commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@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>