import OptimizedComponent from "@/components/animations/optimized-component";
import React from 'react'

const PerformanceOptimization = () => {
  return (
    <div className="p-5">
   
        <OptimizedComponent >
          <div className="w-52 h-52 animate-spin rounded-[20px] from-orange-500 to-yellow-500 bg-gradient-to-t" />
        </OptimizedComponent>

    </div>
  )
}

export default PerformanceOptimization


"use client"
import React, { useState } from 'react';
import { Preview } from '../common/display';
import { motion } from "framer-motion";

interface OptimizedProps {
    children: React.ReactNode;
    className?: string;
}
const OptimizedComponent = ({ children, className }: OptimizedProps) => {

    return (
        <motion.div style={{ willChange: "transform" }} className={className}>
            {children}
        </motion.div>
    )
}

export default OptimizedComponent;

/** CSS
 * Apply the animation to the element 
 * .optimized-component {
 *  opacity: 0; // Initial state to prevent flickering before animation starts 
 *  animation: fadeInAndUp 1s ease-out forwards;
 *  will-change: opacity, transform;
 * }
 * **/