import React, { useEffect, useState } from 'react' import { motion, useAnimation } from 'framer-motion' // Interface for grid configuration structure interface GridConfig { numCards: number // Total number of cards to display cols: number // Number of columns in the grid xBase: number // Base x-coordinate for positioning yBase: number // Base y-coordinate for positioning xStep: number // Horizontal step between cards yStep: number // Vertical step between cards } const AnimatedLoadingSkeleton = () => { const [windowWidth, setWindowWidth] = useState(0) // State to store window width for responsiveness const controls = useAnimation() // Controls for Framer Motion animations // Dynamically calculates grid configuration based on window width const getGridConfig = (width: number): GridConfig => { const numCards = 6 // Fixed number of cards const cols = width >= 1024 ? 3 : width >= 640 ? 2 : 1 // Set columns based on screen width return { numCards, cols, xBase: 40, // Starting x-coordinate yBase: 60, // Starting y-coordinate xStep: 210, // Horizontal spacing yStep: 230 // Vertical spacing } } // Generates random animation paths for the search icon const generateSearchPath = (config: GridConfig) => { const { numCards, cols, xBase, yBase, xStep, yStep } = config const rows = Math.ceil(numCards / cols) // Calculate rows based on cards and columns let allPositions = [] // Generate grid positions for cards for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { if ((row * cols + col) < numCards) { allPositions.push({ x: xBase + (col * xStep), y: yBase + (row * yStep) }) } } } // Shuffle positions to create random animations const numRandomCards = 4 const shuffledPositions = allPositions .sort(() => Math.random() - 0.5) .slice(0, numRandomCards) // Ensure loop completion by adding the starting position shuffledPositions.push(shuffledPositions[0]) return { x: shuffledPositions.map(pos => pos.x), y: shuffledPositions.map(pos => pos.y), scale: Array(shuffledPositions.length).fill(1.2), transition: { duration: shuffledPositions.length * 2, repeat: Infinity, // Loop animation infinitely ease: [0.4, 0, 0.2, 1], // Ease function for smooth animation times: shuffledPositions.map((_, i) => i / (shuffledPositions.length - 1)) } } } // Handles window resize events and updates the window width useEffect(() => { setWindowWidth(window.innerWidth) const handleResize = () => setWindowWidth(window.innerWidth) window.addEventListener('resize', handleResize) return () => window.removeEventListener('resize', handleResize) }, []) // Updates animation path whenever the window width changes useEffect(() => { const config = getGridConfig(windowWidth) controls.start(generateSearchPath(config)) }, [windowWidth, controls]) // Variants for frame animations const frameVariants = { hidden: { opacity: 0, scale: 0.95 }, // Initial state (hidden) visible: { opacity: 1, scale: 1, transition: { duration: 0.5 } } // Transition to visible state } // Variants for individual card animations const cardVariants = { hidden: { y: 20, opacity: 0 }, // Initial state (off-screen) visible: (i: number) => ({ // Animate based on card index y: 0, opacity: 1, transition: { delay: i * 0.1, duration: 0.4 } // Staggered animation }) } // Glow effect variants for the search icon const glowVariants = { animate: { boxShadow: [ "0 0 20px rgba(59, 130, 246, 0.2)", "0 0 35px rgba(59, 130, 246, 0.4)", "0 0 20px rgba(59, 130, 246, 0.2)" ], scale: [1, 1.1, 1], // Pulsating effect transition: { duration: 1, repeat: Infinity, ease: "easeInOut" // Smooth pulsation } } } const config = getGridConfig(windowWidth) // Get current grid configuration return (

{/* Search icon with animation */} {/* Grid of animated cards */}

{[...Array(config.numCards)].map((_, i) => ( {/* Card placeholders */} ))}

) } export default AnimatedLoadingSkeleton