Better handling of theme in AsyncWidget

This commit is contained in:
Pierre HUBERT 2023-07-09 17:30:31 +02:00
parent b82a48d2aa
commit 29254b49a6

View File

@ -1,4 +1,4 @@
import { Alert, Button, CircularProgress } from "@mui/material";
import { Alert, Box, Button, CircularProgress } from "@mui/material";
import { useEffect, useRef, useState } from "react";
enum State {
@ -38,14 +38,19 @@ export function AsyncWidget(p: {
if (state === State.Error)
return (
<div
style={{
<Box
component="div"
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
flex: "1",
flexDirection: "column",
backgroundColor: (theme) =>
theme.palette.mode === "light"
? theme.palette.grey[100]
: theme.palette.grey[900],
}}
>
<Alert
@ -57,22 +62,27 @@ export function AsyncWidget(p: {
</Alert>
<Button onClick={load}>Réessayer</Button>
</div>
</Box>
);
if (state === State.Loading || p.ready === false)
return (
<div
style={{
<Box
component="div"
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
flex: "1",
backgroundColor: (theme) =>
theme.palette.mode === "light"
? theme.palette.grey[100]
: theme.palette.grey[900],
}}
>
<CircularProgress />
</div>
</Box>
);
return p.build();