feat: add reusable brutalist loader system with global switch logic

frontend/src/components/shared/ProtectedRoute.jsx

@@ -1,6 +1,6 @@
 import { Navigate } from "react-router-dom";
 import { useAuth } from "../../context/AuthContext";
-import Loader from "./Loader";
+import Loader from "./loaders/LoaderSwitcher";
 
 const ProtectedRoute = ({ children }) => {
   const { isAuthenticated, loading } = useAuth();

frontend/src/components/shared/PublicRoute.jsx

@@ -1,6 +1,6 @@
 import { Navigate } from "react-router-dom";
 import { useAuth } from "../../context/AuthContext";
-import Loader from "./Loader";
+import Loader from "./loaders/LoaderSwitcher";
 
 const PublicRoute = ({ children }) => {
   const { isAuthenticated, loading } = useAuth();

frontend/src/components/shared/loaders/LoaderAlt.jsx

@@ -0,0 +1,44 @@
+const Spinner = () => {
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className="min-h-screen flex items-center justify-center bg-white"
+    >
+      <span className="sr-only">Loading, please wait...</span>
+      <div className="grid grid-cols-2 gap-3">
+        {[...Array(4)].map((_, i) => (
+          <div
+            key={i}
+            className={`w-10 h-10 ${
+              i % 2 === 0 ? "bg-black" : "border-4 border-black"
+            } animate-grid`}
+            style={{ animationDelay: `${i * 0.15}s` }}
+          />
+        ))}
+      </div>
+
+      <style>
+        {`
+          @keyframes grid {
+            0%,100% {
+              transform: scale(1);
+              opacity: 1;
+            }
+
+            50% {
+              transform: scale(0.45);
+              opacity: 0.3;
+            }
+          }
+
+          .animate-grid {
+            animation: grid 1s ease-in-out infinite;
+          }
+        `}
+      </style>
+    </div>
+  );
+};
+
+export default Spinner;

frontend/src/components/shared/loaders/LoaderPrimary.jsx

@@ -0,0 +1,106 @@
+const Spinner = () => {
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className="min-h-screen flex items-center justify-center bg-white overflow-hidden"
+    >
+      <span className="sr-only">Loading, please wait...</span>
+      <div className="relative w-32 h-32 animate-rotate">
+        {/* Outer Square */}
+        <div className="absolute inset-0 border-[5px] border-black animate-scale-1" />
+
+        {/* Middle Square */}
+        <div className="absolute inset-4 border-[5px] border-black animate-scale-2" />
+
+        {/* Inner Square */}
+        <div className="absolute inset-8 border-[5px] border-black animate-scale-3" />
+
+        {/* Center Block */}
+        <div className="absolute inset-0 m-auto w-5 h-5 bg-black animate-core" />
+      </div>
+
+      <style>
+        {`
+          @keyframes rotate {
+            from {
+              transform: rotate(0deg);
+            }
+
+            to {
+              transform: rotate(360deg);
+            }
+          }
+
+          @keyframes scaleOne {
+            0%,100% {
+              transform: scale(1);
+              opacity: 1;
+            }
+
+            50% {
+              transform: scale(0.75);
+              opacity: 0.4;
+            }
+          }
+
+          @keyframes scaleTwo {
+            0%,100% {
+              transform: scale(0.9);
+              opacity: 0.8;
+            }
+
+            50% {
+              transform: scale(1.15);
+              opacity: 0.3;
+            }
+          }
+
+          @keyframes scaleThree {
+            0%,100% {
+              transform: scale(1);
+              opacity: 1;
+            }
+
+            50% {
+              transform: scale(0.6);
+              opacity: 0.2;
+            }
+          }
+
+          @keyframes core {
+            0%,100% {
+              transform: scale(1);
+            }
+
+            50% {
+              transform: scale(2);
+            }
+          }
+
+          .animate-rotate {
+            animation: rotate 6s linear infinite;
+          }
+
+          .animate-scale-1 {
+            animation: scaleOne 2s ease-in-out infinite;
+          }
+
+          .animate-scale-2 {
+            animation: scaleTwo 2s ease-in-out infinite;
+          }
+
+          .animate-scale-3 {
+            animation: scaleThree 2s ease-in-out infinite;
+          }
+
+          .animate-core {
+            animation: core 1s ease-in-out infinite;
+          }
+        `}
+      </style>
+    </div>
+  );
+};
+
+export default Spinner;

frontend/src/components/shared/loaders/LoaderSwitcher.jsx

@@ -0,0 +1,12 @@
+import LoaderPrimary from "./LoaderPrimary";
+import LoaderAlt from "./LoaderAlt";
+
+// Centralized loader switching logic
+// Change this boolean to switch loaders globally
+const USE_ALT_LOADER = false; // Set to true to use the alternative loader
+
+const LoaderSwitcher = () => {
+  return USE_ALT_LOADER ? <LoaderAlt /> : <LoaderPrimary />;
+};
+
+export default LoaderSwitcher;

frontend/src/pages/DashboardPage.jsx

@@ -1,11 +1,11 @@
 import { useState } from "react";
 import { useAuth } from "../context/AuthContext";
 import { useNavigate, Link } from "react-router-dom";
-import Loader from "../components/shared/Loader";
 import { useCodeforces } from "../hooks/useCodeforces";
 import ConnectBanner from "../components/codeforces/ConnectBanner";
 import VerifyModal from "../components/codeforces/VerifyModal";
 import AIInsightPanel from "../components/ai/AIInsightPanel";
+import LoaderSwitcher from "../components/shared/loaders/LoaderSwitcher";
 
 export default function DashboardPage() {
   const { user, loading, logout } = useAuth();
@@ -29,7 +29,7 @@ export default function DashboardPage() {
   };
 
   if (loading) {
-    return <Loader />;
+    return <LoaderSwitcher />;
   }
 
   return (