From a6d2692c0103446e7397fc6b7fc472874c17f70e Mon Sep 17 00:00:00 2001
From: justintucker <switch.one@gmail.com>
Date: Thu, 9 Oct 2025 23:29:05 -0600
Subject: [PATCH 1/2] Add loader component

---
 src/components/Loader/Loader.jsx | 14 ++++++++++++++
 src/components/Loader/index.js   |  1 +
 2 files changed, 15 insertions(+)
 create mode 100644 src/components/Loader/Loader.jsx
 create mode 100644 src/components/Loader/index.js

diff --git a/src/components/Loader/Loader.jsx b/src/components/Loader/Loader.jsx
new file mode 100644
index 00000000..3d6aa805
--- /dev/null
+++ b/src/components/Loader/Loader.jsx
@@ -0,0 +1,14 @@
+export default function Loader() {
+  return (
+    <div
+      className="flex place-items-center justify-center min-h-screen"
+      role="status"
+      aria-live="polite"
+    >
+      <div className="relative">
+        <div className="w-16 h-16 border-4 border-gray-200 border-t-blue-600 rounded-full animate-spin"></div>
+        <span className="sr-only">Loading content ...</span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js
new file mode 100644
index 00000000..348c02a9
--- /dev/null
+++ b/src/components/Loader/index.js
@@ -0,0 +1 @@
+export { default } from './Loader';

From 8b045f45d406dc490ba6bab759dba781bb712fcc Mon Sep 17 00:00:00 2001
From: justintucker <switch.one@gmail.com>
Date: Thu, 9 Oct 2025 23:29:29 -0600
Subject: [PATCH 2/2] Replace fallback with Loader component

---
 src/layouts/RootLayout.jsx | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/layouts/RootLayout.jsx b/src/layouts/RootLayout.jsx
index f11f8703..441b8a21 100755
--- a/src/layouts/RootLayout.jsx
+++ b/src/layouts/RootLayout.jsx
@@ -5,30 +5,21 @@ import 'react-toastify/dist/ReactToastify.css';
 import SEO from '../components/SEO';
 import TopFooter from '../components/Footer';
 import MainHeader from '../components/Header';
+import Loader from '../components/Loader';
 
 
 function RootLayout() {
   return (
     <>
       <MainHeader />
-      <main className="mt-[84px]">
+      <main className="mt-[84px] min-h-screen">
         <SEO
           title="CoreX Nutrition"
           description="CoreX Nutrition official site — explore accessibility, policies, and open-source projects."
           keywords="CoreX Nutrition, Open Source, Accessibility"
         />
         {/* Sets page-specific title/meta */}
-        <Suspense
-          fallback={
-            <div
-              role="status"
-              aria-live="polite"
-              className="text-center py-8 text-gray-500"
-            >
-              Loading content...
-            </div>
-          }
-        >
+        <Suspense fallback={<Loader />}>
           <Outlet />
         </Suspense>
       </main>