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
93.9k stars 32.26k forks source link

[Skeleton] Add loading property #30407

Open locona opened 2 years ago

locona commented 2 years ago

Duplicates

Latest version

Summary 💡

Add the loading property to simplify the loading branch of the data acquisition.

Examples 🌈

Use cases are expected to include

<Skeleton loading={loading}>
    <Children />
</Skeleton>

Motivation 🔦

I would like to achieve the following simplification of branching.

current

{loading ? (
  <Skeleton variant="circular">
    <Avatar />
  </Skeleton>
) : (
  <Avatar src={data.avatar} />
)}

After the realization of this ISSUE

<Skeleton loading={loading} variant="circular">
  <Avatar src={data.avatar} />
</Skeleton>
masterambi commented 2 years ago

it would be nice

ahmad-reza619 commented 2 years ago

i agree with your suggestion, however this is probably would be a breaking change, so we may have to wait for another major release to implement this.

mnajdova commented 2 years ago

I am adding it to the v6 project, thanks for the suggestion

locona commented 2 years ago

oh, thanks. I'm glad this suggestion was appreciated.

oliviertassinari commented 1 year ago

@siriwatknp explored this idea in Joy UI https://deploy-preview-37893--material-ui.netlify.app/joy-ui/react-skeleton/#loading. If successful, we can roll it out Material UI as well.

MylesWardell commented 2 months ago

@oliviertassinari Any idea on how I can get this functionality early on @mui/material? Is their a experimental or variant I can load?