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

.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)

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

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"