feat(mui): add a loading spinner to <Show> component

[paoloLigsay]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://refine.dev/docs/guides-concepts/contributing/#commit-convention

Bugs / Features

• Related issue(s) linked
• Tests for the changes have been added
• Docs have been added / updated
• Changesets have been added https://refine.dev/docs/guides-concepts/contributing/#creating-a-changeset

What is the current behavior?

The <Show> component in the @refinedev/mui package currently does not display a loading spinner when data is being fetched or processed, leaving users without visual feedback during loading states.

What is the new behavior?

The <Show> component now includes a loading spinner that appears when the isLoading prop is set to true. This provides users with a visual indication that data is being loaded during loading states. A test has been added to verify that the loading spinner renders when the isLoading prop is set to true.

fixes #5668

Notes for reviewers

The loading spinner added to the <Show> component is based on the behavior and color of the spinner used in the <List> component. It utilizes the <CircularProgress> component with its color set to theme.palette.primary.main.

See testing when isLoading is set to True:

when-loading-is-true.mov

See testing of the actual behavior:

actual-loading.mov

This is what the current loading spinner looks like in the <List> component:

comparison-with-list-load.mov

[changeset-bot]

🦋 Changeset detected

Latest commit: 16a9d13

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@refinedev/mui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[alicanerdurmaz]

thanks for the detailed explanation 🚀

[alicanerdurmaz]

Hello again @paoloLigsay, the PR is great, thank you for your effort. However, after discussing with the core team, we decided to make some improvements regarding the design.

The loading should be an overlay, ensuring that the children of the <Show /> component remain visible and not unmounted, similar to the <Show /> component of Ant Design. We thought this way it would prevent flicker and look better.

Implementing this design might require custom CSS, but it's worth it.

Also, we need to add the same features to the <List /> and <Edit /> components.

Do you want to continue to work on this?

[aliemir]

Unfortunately this PR is left incomplete and we're closing this due to inactivity. If anyone is interested on working on this implementation, please let us know in the related issue 🙏