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

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

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