diff --git a/optuna_dashboard/ts/components/GraphContainer.tsx b/optuna_dashboard/ts/components/GraphContainer.tsx
new file mode 100644
index 00000000..c3a0ae65
--- /dev/null
+++ b/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 (
+
+ {graphComponentState !== "graphDidRender" && (
+
+ Loading...
+
+ )}
+
+ )
+}
+
+export default GraphContainer
diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx
index 75b88fc5..d1123111 100644
--- a/optuna_dashboard/ts/components/GraphContour.tsx
+++ b/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
+ return (
+
+ )
}
const ContourFrontend: FC<{
@@ -222,7 +228,10 @@ const ContourFrontend: FC<{
) : null}
-
+
)