From c4fa1d6fb65058ba71928d70dadbf7a422b32275 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ushni=E2=9D=A4=EF=B8=8F?= <karushnika@gmail.com>
Date: Sun, 17 May 2026 16:46:46 +0530
Subject: [PATCH 1/2] `feat: add reusable brutalist loader system with global
 switch logic`

---
 frontend/src/components/shared/Loader.jsx     |  24 ----
 .../src/components/shared/ProtectedRoute.jsx  |   2 +-
 .../src/components/shared/PublicRoute.jsx     |   2 +-
 .../components/shared/loaders/LoaderAlt.jsx   |  40 +++++++
 .../shared/loaders/LoaderPrimary.jsx          | 106 ++++++++++++++++++
 .../shared/loaders/LoaderSwitcher.jsx         |  12 ++
 frontend/src/pages/DashboardPage.jsx          |   5 +-
 7 files changed, 163 insertions(+), 28 deletions(-)
 delete mode 100644 frontend/src/components/shared/Loader.jsx
 create mode 100644 frontend/src/components/shared/loaders/LoaderAlt.jsx
 create mode 100644 frontend/src/components/shared/loaders/LoaderPrimary.jsx
 create mode 100644 frontend/src/components/shared/loaders/LoaderSwitcher.jsx

diff --git a/frontend/src/components/shared/Loader.jsx b/frontend/src/components/shared/Loader.jsx
deleted file mode 100644
index c6cb74e..0000000
--- a/frontend/src/components/shared/Loader.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-const Loader = () => {
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-white">
-      <div className="relative">
-        {/* Brutalist pulsing square */}
-        <div 
-          className="w-16 h-16 border-4 border-black animate-pulse"
-          style={{ animationDuration: '1s' }}
-        />
-        {/* Secondary rotating square */}
-        <div 
-          className="absolute top-0 left-0 w-16 h-16 border-4 border-black rotate-45 animate-spin"
-          style={{ animationDuration: '2s' }}
-        />
-        {/* Loading text */}
-        <p className="mt-8 text-sm font-bold uppercase tracking-widest text-black text-center">
-          Loading
-        </p>
-      </div>
-    </div>
-  );
-};
-
-export default Loader;
diff --git a/frontend/src/components/shared/ProtectedRoute.jsx b/frontend/src/components/shared/ProtectedRoute.jsx
index 6db5626..6a542c0 100644
--- a/frontend/src/components/shared/ProtectedRoute.jsx
+++ b/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();
diff --git a/frontend/src/components/shared/PublicRoute.jsx b/frontend/src/components/shared/PublicRoute.jsx
index d1e5884..1c590f8 100644
--- a/frontend/src/components/shared/PublicRoute.jsx
+++ b/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();
diff --git a/frontend/src/components/shared/loaders/LoaderAlt.jsx b/frontend/src/components/shared/loaders/LoaderAlt.jsx
new file mode 100644
index 0000000..3319d62
--- /dev/null
+++ b/frontend/src/components/shared/loaders/LoaderAlt.jsx
@@ -0,0 +1,40 @@
+const Spinner = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-white">
+      <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;
\ No newline at end of file
diff --git a/frontend/src/components/shared/loaders/LoaderPrimary.jsx b/frontend/src/components/shared/loaders/LoaderPrimary.jsx
new file mode 100644
index 0000000..d5fae75
--- /dev/null
+++ b/frontend/src/components/shared/loaders/LoaderPrimary.jsx
@@ -0,0 +1,106 @@
+const Spinner = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-white overflow-hidden">
+      <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;
\ No newline at end of file
diff --git a/frontend/src/components/shared/loaders/LoaderSwitcher.jsx b/frontend/src/components/shared/loaders/LoaderSwitcher.jsx
new file mode 100644
index 0000000..f8452f8
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/src/pages/DashboardPage.jsx b/frontend/src/pages/DashboardPage.jsx
index d04c569..05ff1ef 100644
--- a/frontend/src/pages/DashboardPage.jsx
+++ b/frontend/src/pages/DashboardPage.jsx
@@ -1,16 +1,17 @@
 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();
   const navigate = useNavigate();
   const [modalOpen, setModalOpen] = useState(false);
+  const load = true
 
   const {
     dashboardSummary: cfData,
@@ -29,7 +30,7 @@ export default function DashboardPage() {
   };
 
   if (loading) {
-    return <Loader />;
+    return <LoaderSwitcher />;
   }
 
   return (

From 4df82cdf6832339084931a99724b81d84b78ce04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ushni=E2=9D=A4=EF=B8=8F?= <karushnika@gmail.com>
Date: Sun, 17 May 2026 17:02:44 +0530
Subject: [PATCH 2/2] fix: improve loader accessibility and remove debug logic

---
 .../src/components/shared/loaders/LoaderAlt.jsx  |  8 ++++++--
 .../components/shared/loaders/LoaderPrimary.jsx  | 16 ++++++++--------
 frontend/src/pages/DashboardPage.jsx             |  1 -
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/shared/loaders/LoaderAlt.jsx b/frontend/src/components/shared/loaders/LoaderAlt.jsx
index 3319d62..23f12ad 100644
--- a/frontend/src/components/shared/loaders/LoaderAlt.jsx
+++ b/frontend/src/components/shared/loaders/LoaderAlt.jsx
@@ -1,8 +1,12 @@
 const Spinner = () => {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-white">
+    <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}
diff --git a/frontend/src/components/shared/loaders/LoaderPrimary.jsx b/frontend/src/components/shared/loaders/LoaderPrimary.jsx
index d5fae75..ddca9ed 100644
--- a/frontend/src/components/shared/loaders/LoaderPrimary.jsx
+++ b/frontend/src/components/shared/loaders/LoaderPrimary.jsx
@@ -1,20 +1,20 @@
 const Spinner = () => {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-white overflow-hidden">
+    <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"
-        />
+        <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"
-        />
+        <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" />
diff --git a/frontend/src/pages/DashboardPage.jsx b/frontend/src/pages/DashboardPage.jsx
index 05ff1ef..330a771 100644
--- a/frontend/src/pages/DashboardPage.jsx
+++ b/frontend/src/pages/DashboardPage.jsx
@@ -11,7 +11,6 @@ export default function DashboardPage() {
   const { user, loading, logout } = useAuth();
   const navigate = useNavigate();
   const [modalOpen, setModalOpen] = useState(false);
-  const load = true
 
   const {
     dashboardSummary: cfData,