loader

src/app/globals.css

@@ -523,4 +523,22 @@ h4,
 h5,
 h6 {
   font-family: var(--font-cormorant-garamond), sans-serif;
-}
+}.loader {
+  border: 16px solid #f3f3f3;
+  border-top: 16px solid #3498db;
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+.loader-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #f0f0f0;
+}

src/app/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useEffect, useState } from 'react';
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
@@ -12,6 +13,15 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
 import { CheckCircle, Flower2, Leaf, Palette, Sparkles } from "lucide-react";
 
 export default function LandingPage() {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 5000);
+    return () => clearTimeout(timer);
+  }, []);
+  useEffect(() => {
+    setIsLoading(true);
+  }, []);
+  const [isLoading, setIsLoading] = useState(false);
   return (
     <ThemeProvider
       defaultButtonVariant="directional-hover"
@@ -25,6 +35,12 @@ export default function LandingPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="extrabold"
     >
+if (isLoading) {
+  return <div>Loading...</div>;
+}
+if (isLoading) {
+  return <div>Loading...</div>;
+}
       <div id="nav" data-section="nav">
         <NavbarStyleApple
           brandName="MossArt"