pgnviewer lazy load and suspense

TODO

@@ -3,12 +3,9 @@ FEN string
 Env Vars
 API base URL
 
-- favicon and page titles
+- favicon and page titles - SEO related things
 - rearrange buttons / header space - collapse on smaller screens
-
 - Loading Chessboard with suspense and spinner
-- toasts
-
 - Lichess login
-
 - logger
+- contact form

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,6 +48,7 @@ const Chessboard = () => {
 			</Section>
 
 			<div className="grid grid-cols-2 gap-4">
+				<Suspense fallback={<LoadingBoard />}>
 					<div>
 						<PgnViewer
 							gamePgn={gameState.pgn || ""}
@@ -80,6 +94,7 @@ const Chessboard = () => {
 							</label>
 						</div>
 					</div>
+				</Suspense>
 
 				<div className="flex flex-col gap-4 items-center">
 					<div className="flex justify-center gap-4">