Impl GraphContainer for common use

optuna_dashboard/ts/components/GraphContainer.tsx

@@ -0,0 +1,32 @@
+import { Box, Typography, useTheme } from "@mui/material"
+import React from "react"
+import { GraphComponentState } from "ts/types/optuna"
+
+function GraphContainer({
+  plotDomId,
+  graphComponentState,
+}: {
+  plotDomId: string
+  graphComponentState: GraphComponentState
+}) {
+  const theme = useTheme()
+  return (
+    <Box component="div" id={plotDomId} sx={{ height: "450px" }}>
+      {graphComponentState !== "graphDidRender" && (
+        <Box
+          component="div"
+          sx={{
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <Typography color={theme.palette.grey[700]}>Loading...</Typography>
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+export default GraphContainer

optuna_dashboard/ts/components/GraphContour.tsx

@@ -26,6 +26,7 @@ import { usePlot } from "../hooks/usePlot"
 import { useMergedUnionSearchSpace } from "../searchSpace"
 import { usePlotlyColorTheme } from "../state"
 import { useBackendRender } from "../state"
+import GraphContainer from "./GraphContainer"
 
 const plotDomId = "graph-contour"
 const CONTOUR_DISABLED_THRESHOLD = 100
@@ -117,7 +118,12 @@ const ContourBackend: FC<{
     }
   }, [error])
 
-  return <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
+  return (
+    <GraphContainer
+      plotDomId={plotDomId}
+      graphComponentState={graphComponentState}
+    />
+  )
 }
 
 const ContourFrontend: FC<{
@@ -222,7 +228,10 @@ const ContourFrontend: FC<{
         ) : null}
       </Grid>
       <Grid item xs={9}>
-        <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
+        <GraphContainer
+          plotDomId={plotDomId}
+          graphComponentState={graphComponentState}
+        />
       </Grid>
     </Grid>
   )