add spinner on pgn viewer loading

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

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>

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;