add loading page

TODO

@@ -11,4 +11,6 @@
 - try/catch where needed in client code
 - generate state and check it against the state returned from lichess https://lichess.org/api#tag/oauth/GET/oauth
 - checkbox and toggle disabled states
-- 404
+- 404 page
+- lichess data with zod validation
+- react query on for study and chapter load, to allow caching

src/components/LoadingView.tsx

@@ -0,0 +1,34 @@
+interface IProps {
+	title?: string;
+	description?: string;
+}
+
+const LoadingView = ({ title, description }: IProps) => {
+	return (
+		<div className="flex min-h-[calc(100vh-194px)] flex-col items-center justify-center p-6 bg-base-100">
+			<div className="relative flex max-w-sm flex-col items-center text-center">
+				{/* Animated Custom Loader */}
+				<div className="relative mb-6 flex h-16 w-16 items-center justify-center">
+					{/* Outer Pulsing Ring */}
+					<div className="absolute inset-0 animate-ping rounded-full bg-(--accent) opacity-20 [animation-duration:1.5s]"></div>
+
+					{/* Inner Spinning Ring */}
+					<div className="h-12 w-12 animate-spin rounded-full border-4 border-(--accent) border-t-transparent"></div>
+				</div>
+
+				{/* Loading Content */}
+				<h2 className="text-xl font-bold tracking-tight mb-2 text-(--base-content)">
+					{title || "Loading Data"}
+				</h2>
+				<p className="text-sm text-(--neutral-content) max-w-xs">
+					{description || "Please wait a moment while we load the data."}
+				</p>
+
+				{/* Decorative background glow matching your layout */}
+				<div className="absolute -inset-10 -z-10 bg-(--accent)/5 blur-2xl rounded-full pointer-events-none" />
+			</div>
+		</div>
+	);
+};
+
+export default LoadingView;

src/pages/Callback.tsx

@@ -1,4 +1,6 @@
 import { getRouteApi, useNavigate } from "@tanstack/react-router";
+import GenericErrorView from "#/components/GenericErrorView.tsx";
+import LoadingView from "#/components/LoadingView.tsx";
 import { useLichess } from "#/hooks/useLichess.ts";
 
 const routeApi = getRouteApi("/callback");
@@ -11,11 +13,11 @@ const Callback = () => {
 
 	if (status === "success") navigate({ to: "/chessboard" });
 
-	if (status === "error") {
+	if (status === "error") return <GenericErrorView error={error} />;
-		console.error(error);
-	}
 
-	return <div>Loading...</div>;
+	return (
+		<LoadingView title="Logging in..." description="Please wait a moment..." />
+	);
 };
 
 export default Callback;

src/routes/__root.tsx

@@ -3,7 +3,8 @@ import { createRootRoute, HeadContent, Scripts } from "@tanstack/react-router";
 import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
 import { type ReactNode, Suspense } from "react";
 import { ToastContainer } from "react-toastify";
-import GenericErrorView from "#/components/Error/GenericErrorView.tsx";
+import GenericErrorView from "#/components/GenericErrorView.tsx";
+import LoadingView from "#/components/LoadingView.tsx";
 import { MatomoAnalytics } from "#/components/MatomoAnalytics.tsx";
 import { LichessUserProvider } from "#/context/LichessUserContext.tsx";
 import Footer from "../components/Footer";
@@ -45,6 +46,7 @@ export const Route = createRootRoute({
 	}),
 	shellComponent: RootDocument,
 	errorComponent: ({ error }) => <GenericErrorView error={error} />,
+	pendingComponent: () => <LoadingView />,
 });
 
 function RootDocument({ children }: { children: ReactNode }) {

src/routes/callback.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, notFound } from "@tanstack/react-router";
 import { z } from "zod";
-import GenericErrorView from "#/components/Error/GenericErrorView.tsx";
+import GenericErrorView from "#/components/GenericErrorView.tsx";
 import Callback from "#/pages/Callback.tsx";
 
 const callbackSchema = z.object({