diff --git a/src/sections/analysis/panelBody/analysisTab/moveInfo.tsx b/src/sections/analysis/panelBody/analysisTab/moveInfo.tsx index 73732ea..71e2337 100644 --- a/src/sections/analysis/panelBody/analysisTab/moveInfo.tsx +++ b/src/sections/analysis/panelBody/analysisTab/moveInfo.tsx @@ -1,4 +1,4 @@ -import { Grid2 as Grid, Stack, Typography } from "@mui/material"; +import { Grid2 as Grid, Skeleton, Stack, Typography } from "@mui/material"; import { useAtomValue } from "jotai"; import { boardAtom, currentPositionAtom } from "../../states"; import { useMemo } from "react"; @@ -21,7 +21,24 @@ export default function MoveInfo() { return moveLineUciToSan(lastPosition)(bestMove); }, [bestMove, board]); - if (!bestMoveSan) return null; + if (board.history().length === 0) return null; + + if (!bestMoveSan) { + return ( + + + + placeholder + + + + ); + } const moveClassification = position.eval?.moveClassification; const moveLabel = moveClassification diff --git a/src/sections/analysis/panelBody/analysisTab/opening.tsx b/src/sections/analysis/panelBody/analysisTab/opening.tsx index 5e160f7..6abc4e5 100644 --- a/src/sections/analysis/panelBody/analysisTab/opening.tsx +++ b/src/sections/analysis/panelBody/analysisTab/opening.tsx @@ -1,11 +1,38 @@ +import { useState } from "react"; import { useCurrentPosition } from "../../hooks/useCurrentPosition"; -import { Grid2 as Grid, Typography } from "@mui/material"; +import { Grid2 as Grid, Skeleton, Typography } from "@mui/material"; export default function Opening() { const position = useCurrentPosition(); + const [lastOpening, setLastOpening] = useState(""); - const opening = position?.eval?.opening; - if (!opening) return null; + const lastMove = position?.lastMove; + if (!lastMove && lastOpening) { + setLastOpening(""); + } + if (!lastMove) return null; + + const opening = position?.eval?.opening || lastOpening; + if (opening && opening !== lastOpening) { + setLastOpening(opening); + } + + if (!opening) { + return ( + + + + placeholder + + + + ); + } return (