From 9bb2cf331f1bdd5da099cbac4eca57ae618d97f0 Mon Sep 17 00:00:00 2001
From: Owen <owenrees.dev@gmail.com>
Date: Wed, 3 Jun 2026 10:09:33 +0200
Subject: [PATCH] add spinner on pgn viewer loading

---
 TODO                     |  1 -
 src/pages/Chessboard.tsx |  1 -
 src/styles.css           | 28 ++++++++++++++++++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/TODO b/TODO
index e38941a..97b30d4 100644
--- a/TODO
+++ b/TODO
@@ -5,7 +5,6 @@ API base URL
 
 - favicon and page titles - SEO related things
 - rearrange buttons / header space - collapse on smaller screens
-- Loading Chessboard with suspense and spinner
 - Lichess login
 - logger
 - contact form
\ No newline at end of file
diff --git a/src/pages/Chessboard.tsx b/src/pages/Chessboard.tsx
index b208d1a..c741e91 100644
--- a/src/pages/Chessboard.tsx
+++ b/src/pages/Chessboard.tsx
@@ -10,7 +10,6 @@ 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>
diff --git a/src/styles.css b/src/styles.css
index a08072c..8b22a71 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -98,10 +98,38 @@ body {
   }
 }
 
+#loading-bar-spinner.spinner {
+  left: 50%;
+  margin-left: -20px;
+  top: 40%;
+  margin-top: -20px;
+  position: absolute;
+  z-index: 19 !important;
+  animation: loading-bar-spinner 400ms linear infinite;
+}
+
+#loading-bar-spinner.spinner .spinner-icon {
+  width: 40px;
+  height: 40px;
+  border: solid 4px transparent;
+  border-top-color: var(--accent) !important;
+  border-left-color: var(--neutral-content) !important;
+  border-radius: 50%;
+}
+
 .rise-in {
   animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
+@keyframes loading-bar-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 @keyframes rise-in {
   from {
     opacity: 0;