loading skeleton

website/app/globals.css

@@ -6,6 +6,27 @@ html{
   scroll-behavior: smooth;
 }
 
+
+.loader {
+  width: fit-content;
+  font-weight: bold;
+  font-family: monospace;
+  font-size: 30px;
+  color :#0000;
+  overflow: hidden;
+  animation: l9 5s infinite cubic-bezier(0.3,1,0,1);
+}
+.loader:before {
+  content:"Loading..."
+}
+@keyframes l9 {
+  0%  {text-shadow: 0    0 #000, 11ch 0 #8A9B0F, 22ch 0 #C02942, 33ch 0 #00A0B0,44ch 0 #000}
+  25% {text-shadow:-11ch 0 #000,  0ch 0 #8A9B0F, 11ch 0 #C02942, 22ch 0 #00A0B0,33ch 0 #000}
+  50% {text-shadow:-22ch 0 #000,-11ch 0 #8A9B0F,  0ch 0 #C02942, 11ch 0 #00A0B0,22ch 0 #000}
+  75% {text-shadow:-33ch 0 #000,-22ch 0 #8A9B0F,-11ch 0 #C02942,  0ch 0 #00A0B0,11ch 0 #000}
+  100%{text-shadow:-44ch 0 #000,-33ch 0 #8A9B0F,-22ch 0 #C02942,-11ch 0 #00A0B0, 0ch 0 #000}
+}
+
 @layer base {
   :root {
     --background: 0 

website/app/page.tsx

@@ -1,10 +1,14 @@
 import { Suspense } from 'react'
 import { LandingPage } from '@/components/landing-page'
+import LoadingSkeleton from '@/components/LoadingSkeleton'
 
 export default function Home() {
   return (
 
+    <Suspense fallback={<LoadingSkeleton/>}>
       <LandingPage />
+    </Suspense>
+
 
   )
 }

website/components/LoadingSkeleton.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const LoadingSkeleton = () => {
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <div className="loader"></div>
+    </div>
+  );
+};
+
+export default LoadingSkeleton;

website/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }