pgnviewer lazy load and suspense

src/pages/Chessboard.tsx

@@ -1,10 +1,23 @@
+import { lazy, Suspense } from "react";
 import CustomHeaders from "#/components/CustomHeaders.tsx";
 import HeaderFields from "#/components/HeaderFields.tsx";
 import LichessButton from "#/components/LichessButton.tsx";
-import PgnViewer from "#/components/PgnViewer.tsx";
 import Section from "#/components/Section.tsx";
 import { useChessGame } from "#/hooks/useChessGame.ts";
 
+const PgnViewer = lazy(() => import("#/components/PgnViewer.tsx"));
+
+const LoadingBoard = () => {
+	return (
+		<div className="relative grid h-125 w-160 items-center text-center">
+			<p>Loading...</p>
+			<div id="loading-bar-spinner" className="spinner">
+				<div className="spinner-icon"></div>
+			</div>
+		</div>
+	);
+};
+
 const Chessboard = () => {
 	const {
 		gameState,
@@ -35,51 +48,53 @@ const Chessboard = () => {
 			</Section>
 
 			<div className="grid grid-cols-2 gap-4">
-				<div>
-					<PgnViewer
-						gamePgn={gameState.pgn || ""}
-						handlePlyChange={handlePlyChange}
-					/>
-					<div className="grid grid-cols-3 gap-2 max-w-150 mt-2">
-						<button
-							className="btn btn-primary"
-							type="button"
-							onClick={handleClearGame}
-						>
-							Clear Game
-						</button>
-						<div className="flex gap-2 items-center">
-							<label
-								htmlFor="diagram-add"
-								className="text-sm text-(--base-content)"
+				<Suspense fallback={<LoadingBoard />}>
+					<div>
+						<PgnViewer
+							gamePgn={gameState.pgn || ""}
+							handlePlyChange={handlePlyChange}
+						/>
+						<div className="grid grid-cols-3 gap-2 max-w-150 mt-2">
+							<button
+								className="btn btn-primary"
+								type="button"
+								onClick={handleClearGame}
 							>
-								Select Diagram
-							</label>
-							<input
-								id="diagram-toggle"
-								name="diagram-toggle"
-								type="checkbox"
-								className="checkbox-accent"
-								checked={gameState.diagrams.some(
-									(d) => d.ply === currentPosition.ply,
-								)}
-								onChange={handleToggleDiagram}
-							/>
-						</div>
+								Clear Game
+							</button>
+							<div className="flex gap-2 items-center">
+								<label
+									htmlFor="diagram-add"
+									className="text-sm text-(--base-content)"
+								>
+									Select Diagram
+								</label>
+								<input
+									id="diagram-toggle"
+									name="diagram-toggle"
+									type="checkbox"
+									className="checkbox-accent"
+									checked={gameState.diagrams.some(
+										(d) => d.ply === currentPosition.ply,
+									)}
+									onChange={handleToggleDiagram}
+								/>
+							</div>
 
-						<label className="toggle text-sm text-(--base-content)">
-							Render move times
-							<input
-								id="render-times"
-								name="render-times"
-								type="checkbox"
-								checked={gameState.diagramClock}
-								onChange={handleToggleClock}
-							/>
-							<span className="slider round" />
-						</label>
+							<label className="toggle text-sm text-(--base-content)">
+								Render move times
+								<input
+									id="render-times"
+									name="render-times"
+									type="checkbox"
+									checked={gameState.diagramClock}
+									onChange={handleToggleClock}
+								/>
+								<span className="slider round" />
+							</label>
+						</div>
 					</div>
-				</div>
+				</Suspense>
 
 				<div className="flex flex-col gap-4 items-center">
 					<div className="flex justify-center gap-4">