[BUG] <Show isLoading={true}> with Material UI doesn't show loading spinner

[rners01]

Describe the bug

<Show isLoading={true}> with Material UI doesn't show loading spinner

Steps To Reproduce

1. Create view with isLoading prop set to true
2. Observe no spinner shown

Expected behavior

Spinner on isLoading=true

Packages

"@refinedev/cli": "2.16.24", "@refinedev/core": "4.47.1", "@refinedev/kbar": "1.3.6", "@refinedev/mui": "5.14.4", "@refinedev/react-hook-form": "4.8.14", "@refinedev/react-router-v6": "4.5.5", "@refinedev/simple-rest": "5.0.2",

Additional Context

No response

[issa012]

Hello, I tried to recreate this bug. It is working as you said, there is no loading spinner. However, I think that is the expected behavior. When loading, the component doesn't show a loading spinner, but disables the refresh button. I found that here in the documentation: https://refine.dev/docs/ui-integrations/material-ui/components/basic-views/show/#isloading

[BatuhanW]

Thanks for the explanation, @issa012. As mentioned you can use this prop to disable refresh button.

[rners01]

@BatuhanW @issa012 It's not looking pretty with default values displaying first and then jumping to the API data. Also Mantine and Ant UI integrations have loading spinner for such scenarios, that's why I though it could be the bug. So there's no plan to add spinner?

[BatuhanW]

@rners01 While it's not a bug, we are open to contributions if someone would like to work on this one.

[issa012]

I can try, if you assign this to me.

[BatuhanW]

Sure, assigned to you. 🚀

[rners01]

@BatuhanW wrong assigned, should've been @issa012 (:

[rners01]

@BatuhanW Was the feature merged?

[0xJaskeerat]

Hey @rners01 @BatuhanW I would love to try on this issue , can you please assign me ?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rners01]

@omeraplak Can you assign it to @0xJaskeerat ?

[BatuhanW]

@0xJaskeerat assiged issue to you.

[paoloLigsay]

I noticed this issue has been stale for a while. I can work on this, could you please assign it to me, @BatuhanW? Thanks!

[aliemir]

I'll leave a comment here to help anyone interested to work on this issue about what we want from the implementation. 🙏

This fix needs to be implemented for <Create />, <Edit /> and <Show /> components. isLoading prop should be used to display a spinner overlaying the content.

To avoid any layout shifts, we're recommending using some absolute positioned box inside the <Card /> and positioning the <Card /> as relative.

We can pass sx.position = "relative" but also allow overriding this value like:

    <Card
      {...(wrapperProps ?? {})}
      sx={{
        position: "relative",
        ...wrapperProps?.sx,
      }}
    >

Then we can place a <CircularProgress /> wrapped with <Box /> inside the <Card /> like below:

      {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>
      )}

I'm not sure if this covers all the necessary cases but I guess it will be a good starting point for the implementation.

We'll be happy to help if anyone is interested working on this issue. 🚀

[Anonymous961]

@aliemir is this issue fixed?

[aliemir]

Hey @Anonymous961, your screenshot is from Ant Design. This issue is related with our Material UI CRUD components and its still looking for contributors 🙏