feat(mui): added loading spinner to <Create/>, <Edit/> and `<Show…

…/>` components. (#6271) (fixes #5668) Co-authored-by: Ali Emir Şen <[email protected]>
refinedev · Aug 20, 2024 · 2b89fbd · 2b89fbd
1 parent 7a44e5d
commit 2b89fbd
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 9 deletions.
diff --git a/.changeset/nasty-glasses-care.md b/.changeset/nasty-glasses-care.md
@@ -0,0 +1,9 @@
+---
+"@refinedev/mui": minor
+---
+
+feat(mui): added loading spinner to `<Create />`, `<Edit />` and `<Show />` components
+
+This change introduces a loading spinner to the `<Create />`, `<Edit />` and `<Show />` components in the `@refinedev/mui` package. The spinner provides a visual indication that data is being loaded, improving the user experience bym giving clear feedback during loading states.
+
+[Resolves #5668](https://github.com/refinedev/refine/issues/5668)
diff --git a/packages/inferencer/src/inferencers/mui/__snapshots__/index.test.tsx.snap b/packages/inferencer/src/inferencers/mui/__snapshots__/index.test.tsx.snap
@@ -9866,7 +9866,7 @@ exports[`MuiInferencer should match the snapshot 2`] = `
 <DocumentFragment>
   <div>
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-bhp9pd-MuiPaper-root-MuiCard-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-4ob670-MuiPaper-root-MuiCard-root"
     >
       <nav
         aria-label="breadcrumb"
@@ -24770,7 +24770,7 @@ exports[`MuiInferencer should match the snapshot 3`] = `
 <DocumentFragment>
   <div>
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-bhp9pd-MuiPaper-root-MuiCard-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-4ob670-MuiPaper-root-MuiCard-root"
     >
       <nav
         aria-label="breadcrumb"
@@ -40779,7 +40779,7 @@ exports[`MuiInferencer should match the snapshot 4`] = `
 <DocumentFragment>
   <div>
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-bhp9pd-MuiPaper-root-MuiCard-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-4ob670-MuiPaper-root-MuiCard-root"
     >
       <nav
         aria-label="breadcrumb"

diff --git a/packages/inferencer/src/inferencers/mui/__tests__/__snapshots__/create.test.tsx.snap b/packages/inferencer/src/inferencers/mui/__tests__/__snapshots__/create.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`MuiCreateInferencer should match the snapshot 1`] = `
 <DocumentFragment>
   <div>
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-bhp9pd-MuiPaper-root-MuiCard-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-4ob670-MuiPaper-root-MuiCard-root"
     >
       <div
         class="MuiCardHeader-root css-94f51d-MuiCardHeader-root"

diff --git a/packages/inferencer/src/inferencers/mui/__tests__/__snapshots__/edit.test.tsx.snap b/packages/inferencer/src/inferencers/mui/__tests__/__snapshots__/edit.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`MuiEditInferencer should match the snapshot 1`] = `
 <DocumentFragment>
   <div>
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-bhp9pd-MuiPaper-root-MuiCard-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-4ob670-MuiPaper-root-MuiCard-root"
     >
       <div
         class="MuiCardHeader-root css-94f51d-MuiCardHeader-root"

diff --git a/packages/inferencer/src/inferencers/mui/__tests__/__snapshots__/show.test.tsx.snap b/packages/inferencer/src/inferencers/mui/__tests__/__snapshots__/show.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`MuiShowInferencer should match the snapshot 1`] = `
 <DocumentFragment>
   <div>
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-bhp9pd-MuiPaper-root-MuiCard-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-4ob670-MuiPaper-root-MuiCard-root"
     >
       <div
         class="MuiCardHeader-root css-94f51d-MuiCardHeader-root"

diff --git a/packages/mui/src/components/crud/create/index.tsx b/packages/mui/src/components/crud/create/index.tsx
@@ -17,6 +17,9 @@ import CardContent from "@mui/material/CardContent";
 import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+
+import { alpha } from "@mui/system";
 
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 
@@ -78,7 +81,29 @@ export const Create: React.FC<CreateProps> = ({
   const defaultFooterButtons = <SaveButton {...saveButtonProps} />;
 
   return (
-    <Card {...(wrapperProps ?? {})}>
+    <Card
+      {...(wrapperProps ?? {})}
+      sx={{
+        position: "relative",
+        ...wrapperProps?.sx,
+      }}
+    >
+      {isLoading && (
+        <Box
+          sx={{
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            zIndex: (theme) => theme.zIndex.drawer + 1,
+            // this is needed to support custom themes, dark mode etc.
+            bgcolor: (theme) => alpha(theme.palette.background.paper, 0.4),
+          }}
+        >
+          <CircularProgress />
+        </Box>
+      )}
       {breadcrumbComponent}
       <CardHeader
         sx={{

diff --git a/packages/mui/src/components/crud/edit/index.tsx b/packages/mui/src/components/crud/edit/index.tsx
@@ -20,6 +20,9 @@ import CardContent from "@mui/material/CardContent";
 import CardActions from "@mui/material/CardActions";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+
+import { alpha } from "@mui/system";
 
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 
@@ -165,7 +168,29 @@ export const Edit: React.FC<EditProps> = ({
   );
 
   return (
-    <Card {...(wrapperProps ?? {})}>
+    <Card
+      {...(wrapperProps ?? {})}
+      sx={{
+        position: "relative",
+        ...wrapperProps?.sx,
+      }}
+    >
+      {isLoading && (
+        <Box
+          sx={{
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            zIndex: (theme) => theme.zIndex.drawer + 1,
+            // this is needed to support custom themes, dark mode etc.
+            bgcolor: (theme) => alpha(theme.palette.background.paper, 0.4),
+          }}
+        >
+          <CircularProgress />
+        </Box>
+      )}
       {breadcrumbComponent}
       <CardHeader
         sx={{

diff --git a/packages/mui/src/components/crud/show/index.tsx b/packages/mui/src/components/crud/show/index.tsx
@@ -18,6 +18,9 @@ import CardHeader from "@mui/material/CardHeader";
 import IconButton from "@mui/material/IconButton";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
+import CircularProgress from "@mui/material/CircularProgress";
+
+import { alpha } from "@mui/system";
 
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 
@@ -148,7 +151,29 @@ export const Show: React.FC<ShowProps> = ({
   );
 
   return (
-    <Card {...(wrapperProps ?? {})}>
+    <Card
+      {...(wrapperProps ?? {})}
+      sx={{
+        position: "relative",
+        ...wrapperProps?.sx,
+      }}
+    >
+      {isLoading && (
+        <Box
+          sx={{
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            zIndex: (theme) => theme.zIndex.drawer + 1,
+            // this is needed to support custom themes, dark mode etc.
+            bgcolor: (theme) => alpha(theme.palette.background.paper, 0.4),
+          }}
+        >
+          <CircularProgress />
+        </Box>
+      )}
       {breadcrumbComponent}
       <CardHeader
         sx={{