perf: optimize framer-motion bundle size and memoize dictionary fetching

- Wrap getDictionary with React cache to prevent redundant JSON parsing on the server
- Create MotionProvider to globally initialize framer-motion LazyMotion with domAnimation
- Replace standard 'motion' imports with 'm' across all animated client components (HomeClient, Navbar, GaleriClient, SSSClient, card, text-reveal) to drastically reduce First Load JS size
This commit is contained in:
mstfyldz
2026-06-04 12:50:23 +03:00
parent e1d8bae5a4
commit acf01c81fa
9 changed files with 59 additions and 44 deletions
+9 -9
View File
@@ -2,7 +2,7 @@
import { useState } from "react";
import Image from "next/image";
import { motion, AnimatePresence } from "framer-motion";
import { m, AnimatePresence } from "framer-motion";
import { X, ZoomIn } from "lucide-react";
import { Badge } from "@/app/components/ui/badge";
@@ -60,13 +60,13 @@ export default function GaleriClient({ lang, dict }: { lang: string; dict: any }
{/* Grid */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 pb-28">
<motion.div
<m.div
layout
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
>
<AnimatePresence mode="popLayout">
{filtered.map((img) => (
<motion.div
<m.div
key={img.src}
layout
initial={{ opacity: 0, scale: 0.94 }}
@@ -97,16 +97,16 @@ export default function GaleriClient({ lang, dict }: { lang: string; dict: any }
>
{img.cat}
</Badge>
</motion.div>
</m.div>
))}
</AnimatePresence>
</motion.div>
</m.div>
</div>
{/* Lightbox */}
<AnimatePresence>
{lightbox && (
<motion.div
<m.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
@@ -119,7 +119,7 @@ export default function GaleriClient({ lang, dict }: { lang: string; dict: any }
>
<X size={28} />
</button>
<motion.div
<m.div
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.9, opacity: 0 }}
@@ -135,8 +135,8 @@ export default function GaleriClient({ lang, dict }: { lang: string; dict: any }
className="w-full h-auto max-h-[80vh] object-contain"
/>
<p className="text-center text-white font-serif text-xl mt-4">{lightbox.title}</p>
</motion.div>
</motion.div>
</m.div>
</m.div>
)}
</AnimatePresence>
</div>