From 57df92ab2c2ae768fb9a3c0794997005c389c6b3 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Fri, 16 May 2025 23:49:53 +0200
Subject: [PATCH] feat: refactor PageLoading component to enhance loading
 animation and visual feedback

---
 .../Objects/Loaders/PageLoading.tsx           | 89 +++++++------------
 1 file changed, 33 insertions(+), 56 deletions(-)

diff --git a/apps/web/components/Objects/Loaders/PageLoading.tsx b/apps/web/components/Objects/Loaders/PageLoading.tsx
index d0390339..a2aff1c8 100644
--- a/apps/web/components/Objects/Loaders/PageLoading.tsx
+++ b/apps/web/components/Objects/Loaders/PageLoading.tsx
@@ -1,64 +1,41 @@
 'use client'
+import { Loader2 } from 'lucide-react'
 import { motion } from 'framer-motion'
 
-const variants = {
-  hidden: { opacity: 0, x: 0, y: 0 },
-  enter: { opacity: 1, x: 0, y: 0 },
-  exit: { opacity: 0, x: 0, y: 0 },
-}
-
-// Animation variants for the dots
-const dotVariants = {
-  initial: { scale: 0.8, opacity: 0.4 },
-  animate: (i: number) => ({
-    scale: [0.8, 1.2, 0.8],
-    opacity: [0.4, 1, 0.4],
-    transition: {
-      duration: 1.5,
-      repeat: Infinity,
-      delay: i * 0.2,
-      ease: "easeInOut"
-    }
-  })
-}
-
 function PageLoading() {
   return (
-    <motion.main
-      variants={variants}
-      initial="hidden"
-      animate="enter"
-      exit="exit"
-      transition={{ type: 'linear' }}
-      className=""
-    >
-      <div className="max-w-7xl mx-auto px-4 py-20 transition-all">
-        <div className="flex flex-col items-center justify-center h-40">
-          {/* Animated dots */}
-          <div className="flex space-x-4">
-            {[0, 1, 2, 3, 4].map((i) => (
-              <motion.div
-                key={i}
-                custom={i}
-                variants={dotVariants}
-                initial="initial"
-                animate="animate"
-                className="w-4 h-4 rounded-full bg-gray-500 dark:bg-gray-400"
-              />
-            ))}
-          </div>
-          
-          <motion.p 
-            className="mt-6 text-sm text-gray-500 dark:text-gray-400"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: [0, 1, 0] }}
-            transition={{ duration: 2, repeat: Infinity }}
-          >
-            Loading...
-          </motion.p>
-        </div>
-      </div>
-    </motion.main>
+    <div className="fixed inset-0 flex items-center justify-center">
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ 
+          opacity: [0, 0.5, 1], 
+          scale: 1,
+          transition: {
+            duration: 0.8,
+            scale: {
+              type: "spring",
+              stiffness: 50,
+              damping: 15,
+              delay: 0.2
+            },
+            opacity: {
+              duration: 0.6,
+              times: [0, 0.6, 1]
+            }
+          }
+        }}
+        exit={{ 
+          opacity: 0, 
+          scale: 0.95,
+          transition: {
+            duration: 0.4,
+            ease: "easeOut"
+          }
+        }}
+      >
+        <Loader2 className="w-10 h-10 text-gray-400 animate-spin" />
+      </motion.div>
+    </div>
   )
 }