rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
swve 2025-05-16 23:49:53 +02:00
parent 30b7dc4410
commit 57df92ab2c
1 changed files with 33 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

83
apps/web/components/Objects/Loaders/PageLoading.tsx
View file

@ -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) => (
<div className="fixed inset-0 flex items-center justify-center">
<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 }}
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"
}
}}
>
Loading...
</motion.p>
<Loader2 className="w-10 h-10 text-gray-400 animate-spin" />
</motion.div>
</div>
</div>
</motion.main>
)
}