style : add skeletons in analysis body

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 (
+      <Grid size={12} justifyItems="center" alignContent="center">
+        <Skeleton
+          variant="rounded"
+          animation="wave"
+          width={"12em"}
+          sx={{ color: "transparent", maxWidth: "7vw", maxHeight: "3.5vw" }}
+        >
+          <Typography align="center" fontSize="0.9rem">
+            placeholder
+          </Typography>
+        </Skeleton>
+      </Grid>
+    );
+  }
 
   const moveClassification = position.eval?.moveClassification;
   const moveLabel = moveClassification

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 (
+      <Grid size={12} justifyItems="center" alignContent="center">
+        <Skeleton
+          variant="rounded"
+          animation="wave"
+          width={"12em"}
+          sx={{ color: "transparent", maxWidth: "7vw", maxHeight: "3.5vw" }}
+        >
+          <Typography align="center" fontSize="0.9rem">
+            placeholder
+          </Typography>
+        </Skeleton>
+      </Grid>
+    );
+  }
 
   return (
     <Grid size={12}>