Better handling of theme in AsyncWidget

geneit_app/src/widgets/AsyncWidget.tsx

@@ -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();