[joy-ui] Add Spin component

[mohammad19974]

Summary

A spinner for displaying loading state of a page or a section or a suspense.

When To Use When a portion of the page is awaiting asynchronous data or undergoing a rendering process, incorporating a well-designed loading animation can significantly ease user anticipation and enhance their experience.

Examples

data

Motivation

No response

Search keywords: Loading

[zprobinson]

What does the suggested spin component provide over than the circular progress component, linear progress component, or skeleton loader component?

[yasminebeji]

@mohammad19974 Could you share instances or scenarios in which you see the Spin component being more beneficial than existing loading components such as Circular Progress or Linear Progress?

[siriwatknp]

I agree with @zprobinson and @yasminebeji. Please share more details about the use cases and examples (maybe screenshots, recording or mockup).

[mohammad19974]

` <Spin spinning={true} indicator={< Circular/>}>

Hello

 <div>Content here</div>
  </Spin>

`

the spin :loading (with backdrop or not ) wrapper on content

[zprobinson]

This seems like something that the components exposed in mui joy already can be used to create, with not too much difficulty.

Where is the threshold between what the library exports and what consumers of the library can create as a reusable app component?

[siriwatknp]

<Spin spinning={true} indicator={< Circular/>}> <div>Hello</div> <div>Content here</div> </Spin>

Thanks for the clarity. It looks like an Overlay with loading component.

Where is the threshold between what the library exports and what consumers of the library can create as a reusable app component?

It's hard to justify but most of the time we prioritize component based on issues upvotes.