Merge pull request #105 from justintucker/improve-suspense-loader

Improve suspense loader

Author: Alexandrbig1

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>
+  );
+}

src/components/Loader/index.js

@@ -0,0 +1 @@
+export { default } from './Loader';

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>