Better handling of theme in AsyncWidget
This commit is contained in:
parent
b82a48d2aa
commit
29254b49a6
@ -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();
|
||||
|
Loading…
Reference in New Issue
Block a user