From a8ae6b9d3c7f1d9bb91f2507950f17b73f97432a Mon Sep 17 00:00:00 2001
From: paoloLigsay <paolomartinligsay@gmail.com>
Date: Fri, 12 Jul 2024 11:19:50 +0800
Subject: [PATCH 1/3] feat(mui): add a loading spinner to <Show> component

---
 .../mui/src/components/crud/show/index.spec.tsx     |  8 ++++++++
 packages/mui/src/components/crud/show/index.tsx     | 13 ++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/mui/src/components/crud/show/index.spec.tsx b/packages/mui/src/components/crud/show/index.spec.tsx
index adb95b049ec3..50f96cd08360 100644
--- a/packages/mui/src/components/crud/show/index.spec.tsx
+++ b/packages/mui/src/components/crud/show/index.spec.tsx
@@ -34,6 +34,14 @@ const renderShow = (
 describe("Show", () => {
   crudShowTests.bind(this)(Show);
 
+  it("should display loading spinner when isLoading is true", async () => {
+    const { queryByRole } = renderShow(<Show isLoading />);
+
+    await waitFor(() => {
+      expect(queryByRole("progressbar")).not.toBeNull();
+    });
+  });
+
   it("depending on the accessControlProvider it should get the buttons successfully", async () => {
     const { getByText, getAllByText, queryByTestId } = renderShow(
       <Show
diff --git a/packages/mui/src/components/crud/show/index.tsx b/packages/mui/src/components/crud/show/index.tsx
index 0e10b5ba0a3c..2af6d7b359a2 100644
--- a/packages/mui/src/components/crud/show/index.tsx
+++ b/packages/mui/src/components/crud/show/index.tsx
@@ -34,6 +34,7 @@ import {
 } from "@components";
 import type { ShowProps } from "../types";
 import { RefinePageHeaderClassNames } from "@refinedev/ui-types";
+import { CircularProgress } from "@mui/material";
 
 /**
  * `<Show>` provides us a layout for displaying the page.
@@ -212,7 +213,17 @@ export const Show: React.FC<ShowProps> = ({
         }
         {...(headerProps ?? {})}
       />
-      <CardContent {...(contentProps ?? {})}>{children}</CardContent>
+      <CardContent {...(contentProps ?? {})}>
+        {isLoading ? (
+          <Box display="flex" justifyContent="center">
+            <CircularProgress
+              sx={{ border: (theme) => theme.palette.primary.main }}
+            />
+          </Box>
+        ) : (
+          children
+        )}
+      </CardContent>
       <CardActions sx={{ padding: "16px" }} {...(footerButtonProps ?? {})}>
         {footerButtons
           ? typeof footerButtons === "function"

From 7a5453868368a01074398a7612493bf835c2eaee Mon Sep 17 00:00:00 2001
From: paoloLigsay <paolomartinligsay@gmail.com>
Date: Fri, 12 Jul 2024 11:38:48 +0800
Subject: [PATCH 2/3] feat(mui): add a changeset

---
 .changeset/lucky-balloons-relax.md | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 .changeset/lucky-balloons-relax.md

diff --git a/.changeset/lucky-balloons-relax.md b/.changeset/lucky-balloons-relax.md
new file mode 100644
index 000000000000..3c7b73ffb3d4
--- /dev/null
+++ b/.changeset/lucky-balloons-relax.md
@@ -0,0 +1,9 @@
+---
+"@refinedev/mui": minor
+---
+
+feat(mui): add loading spinner to `<Show>` component [#5668](https://github.com/refinedev/refine/issues/5668)
+
+This change introduces a loading spinner to the `<Show>` component in the `@refinedev/mui` package. The spinner provides a visual indication that data is being loaded, improving the user experience by giving clear feedback during loading states.
+
+Resolves [#5668](https://github.com/refinedev/refine/issues/5668)

From 8505499f8c688b0cb9917d067fdac2d1c4cbcd75 Mon Sep 17 00:00:00 2001
From: paoloLigsay <paolomartinligsay@gmail.com>
Date: Fri, 12 Jul 2024 19:35:32 +0800
Subject: [PATCH 3/3] feat(mui): update circularProgress import

---
 packages/mui/src/components/crud/show/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui/src/components/crud/show/index.tsx b/packages/mui/src/components/crud/show/index.tsx
index 2af6d7b359a2..8fece82c7ad2 100644
--- a/packages/mui/src/components/crud/show/index.tsx
+++ b/packages/mui/src/components/crud/show/index.tsx
@@ -34,7 +34,7 @@ import {
 } from "@components";
 import type { ShowProps } from "../types";
 import { RefinePageHeaderClassNames } from "@refinedev/ui-types";
-import { CircularProgress } from "@mui/material";
+import CircularProgress from "@mui/material/CircularProgress";
 
 /**
  * `<Show>` provides us a layout for displaying the page.