suspense-overlay-wts v1.0.6

Suspense, which shows the fallback on top of previous content.

Example

import Suspense from "suspense-overlay";

export default function App() {
  return <Suspense fallback="loading...">...</Suspense>;
}

With MUI Backdrop

import { alpha, Backdrop, Box, CircularProgress } from "@mui/material";
import { SuspenseOverlayCore } from "suspense-overlay";

export default function MuiBackdropSuspense({ children }) {
  return (
    <Box sx={{ position: "relative", display: "grid" }}>
      <SuspenseOverlayCore
        fallback={
          <Backdrop
            sx={{
              position: "relative",
              gridArea: "1 / 1",
              backgroundColor: (theme) =>
                alpha(theme.palette.background.paper, 0.5),
            }}
          >
            <CircularProgress />
          </Backdrop>
        }
      >
        <Box sx={{ gridArea: "1 / 1" }}>{children}</Box>
      </SuspenseOverlayCore>
    </Box>
  );
}

<Suspense>

Props

Optional

see Fallback.tsx for more overrides and details.

<SuspenseOverlayCore>

Props