pierre/GeneIT
1
0
Fork 0
Code Issues Pull Requests 6 Packages Projects Releases Wiki Activity

Better handling of theme in AsyncWidget

Browse Source
This commit is contained in:
Pierre HUBERT 2023-07-09 17:30:31 +02:00
parent b82a48d2aa
commit 29254b49a6
1 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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