feat: refactor PageLoading component to enhance loading animation and visual feedback

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
+    <div className="fixed inset-0 flex items-center justify-center">
-      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}
+        initial={{ opacity: 0, scale: 0.95 }}
-                custom={i}
+        animate={{ 
-                variants={dotVariants}
+          opacity: [0, 0.5, 1], 
-                initial="initial"
+          scale: 1,
-                animate="animate"
+          transition: {
-                className="w-4 h-4 rounded-full bg-gray-500 dark:bg-gray-400"
+            duration: 0.8,
-              />
+            scale: {
-            ))}
+              type: "spring",
-          </div>
+              stiffness: 50,
-          
+              damping: 15,
-          <motion.p 
+              delay: 0.2
-            className="mt-6 text-sm text-gray-500 dark:text-gray-400"
+            },
-            initial={{ opacity: 0 }}
+            opacity: {
-            animate={{ opacity: [0, 1, 0] }}
+              duration: 0.6,
-            transition={{ duration: 2, repeat: Infinity }}
+              times: [0, 0.6, 1]
+            }
+          }
+        }}
+        exit={{ 
+          opacity: 0, 
+          scale: 0.95,
+          transition: {
+            duration: 0.4,
+            ease: "easeOut"
+          }
+        }}
       >
-            Loading...
+        <Loader2 className="w-10 h-10 text-gray-400 animate-spin" />
-          </motion.p>
+      </motion.div>
     </div>
-      </div>
-    </motion.main>
   )
 }