feat : add progress bar

src/sections/analysis/reviewPanelHeader/analyzeButton.tsx

@@ -1,12 +1,12 @@
 import { Icon } from "@iconify/react";
-import { useState } from "react";
 import {
   engineDepthAtom,
   engineMultiPvAtom,
+  evaluationProgressAtom,
   gameAtom,
   gameEvalAtom,
 } from "../states";
-import { useAtomValue, useSetAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { getEvaluateGameParams } from "@/lib/chess";
 import { useGameDatabase } from "@/hooks/useGameDatabase";
 import { LoadingButton } from "@mui/lab";
@@ -16,36 +16,33 @@ import { logAnalyticsEvent } from "@/lib/firebase";
 
 export default function AnalyzeButton() {
   const engine = useEngine(EngineName.Stockfish16);
-  const [evaluationInProgress, setEvaluationInProgress] = useState(false);
+  const [evaluationProgress, setEvaluationProgress] = useAtom(
+    evaluationProgressAtom
+  );
   const engineDepth = useAtomValue(engineDepthAtom);
   const engineMultiPv = useAtomValue(engineMultiPvAtom);
   const { setGameEval, gameFromUrl } = useGameDatabase();
-  const setEval = useSetAtom(gameEvalAtom);
+  const [gameEval, setEval] = useAtom(gameEvalAtom);
   const game = useAtomValue(gameAtom);
 
   const readyToAnalyse =
-    engine?.isReady() && game.history().length > 0 && !evaluationInProgress;
+    engine?.isReady() && game.history().length > 0 && !evaluationProgress;
 
   const handleAnalyze = async () => {
     const params = getEvaluateGameParams(game);
-    if (
-      !engine?.isReady() ||
-      params.fens.length === 0 ||
-      evaluationInProgress
-    ) {
+    if (!engine?.isReady() || params.fens.length === 0 || evaluationProgress) {
       return;
     }
 
-    setEvaluationInProgress(true);
-
     const newGameEval = await engine.evaluateGame({
       ...params,
       depth: engineDepth,
       multiPv: engineMultiPv,
+      setEvaluationProgress,
     });
 
     setEval(newGameEval);
-    setEvaluationInProgress(false);
+    setEvaluationProgress(0);
 
     if (gameFromUrl) {
       setGameEval(gameFromUrl.id, newGameEval);
@@ -59,26 +56,17 @@ export default function AnalyzeButton() {
     });
   };
 
+  if (evaluationProgress) return null;
+
   return (
     <LoadingButton
       variant="contained"
       size="small"
-      startIcon={
-        !evaluationInProgress && (
-          <Icon icon="streamline:magnifying-glass-solid" />
-        )
-      }
+      startIcon={<Icon icon="streamline:magnifying-glass-solid" />}
       onClick={handleAnalyze}
       disabled={!readyToAnalyse}
-      loading={evaluationInProgress}
-      loadingPosition={evaluationInProgress ? "end" : undefined}
-      endIcon={
-        evaluationInProgress && (
-          <Icon icon="streamline:magnifying-glass-solid" />
-        )
-      }
     >
-      {evaluationInProgress ? "Analyzing..." : "Analyze"}
+      {gameEval ? "Analyze again" : "Analyze"}
     </LoadingButton>
   );
 }

src/sections/analysis/reviewPanelHeader/index.tsx

@@ -3,8 +3,13 @@ import { Grid, Typography } from "@mui/material";
 import GamePanel from "./gamePanel";
 import LoadGame from "./loadGame";
 import AnalyzeButton from "./analyzeButton";
+import LinearProgressBar from "@/components/LinearProgressBar";
+import { useAtomValue } from "jotai";
+import { evaluationProgressAtom } from "../states";
 
 export default function ReviewPanelHeader() {
+  const evaluationProgress = useAtomValue(evaluationProgressAtom);
+
   return (
     <Grid
       item
@@ -36,11 +41,12 @@ export default function ReviewPanelHeader() {
         justifyContent="center"
         alignItems="center"
         rowGap={3}
-        columnGap={15}
+        columnGap={12}
       >
         <GamePanel />
         <LoadGame />
         <AnalyzeButton />
+        <LinearProgressBar value={evaluationProgress} label="Analyzing..." />
       </Grid>
     </Grid>
   );

src/sections/analysis/reviewPanelHeader/loadGame.tsx

@@ -4,6 +4,7 @@ import { useChessActions } from "@/hooks/useChessActions";
 import {
   boardAtom,
   boardOrientationAtom,
+  evaluationProgressAtom,
   gameAtom,
   gameEvalAtom,
 } from "../states";
@@ -20,6 +21,7 @@ export default function LoadGame() {
   const { gameFromUrl } = useGameDatabase();
   const setEval = useSetAtom(gameEvalAtom);
   const setBoardOrientation = useSetAtom(boardOrientationAtom);
+  const evaluationProgress = useAtomValue(evaluationProgressAtom);
 
   const resetAndSetGamePgn = useCallback(
     (pgn: string) => {
@@ -48,6 +50,8 @@ export default function LoadGame() {
 
   const isGameLoaded = gameFromUrl !== undefined || !!game.header().White;
 
+  if (evaluationProgress) return null;
+
   return (
     <LoadGameButton
       label={isGameLoaded ? "Load another game" : "Load game"}

src/sections/analysis/states.ts

@@ -13,3 +13,4 @@ export const showPlayerMoveIconAtom = atom(true);
 
 export const engineDepthAtom = atom(16);
 export const engineMultiPvAtom = atom(3);
+export const evaluationProgressAtom = atom(0);