From cec08e3ab3fe5097197f8691b563559fea727f77 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Mon, 29 Jun 2026 21:04:01 +0200
Subject: [PATCH] fix(perf): dynamic import of framer-motion features to
 eliminate 43 KiB unused JS

---
 components/blocks/InteractiveMapPins.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/blocks/InteractiveMapPins.tsx b/components/blocks/InteractiveMapPins.tsx
index f26bb9255..dbf7d0166 100644
--- a/components/blocks/InteractiveMapPins.tsx
+++ b/components/blocks/InteractiveMapPins.tsx
@@ -1,12 +1,14 @@
 'use client';
 
 import React from 'react';
-import { m, AnimatePresence, LazyMotion, domAnimation } from 'framer-motion';
+import { m, AnimatePresence, LazyMotion } from 'framer-motion';
 import { MapPin, CheckCircle2, ArrowUpRight } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Location } from '@/lib/map-data';
 
+const loadFeatures = () => import('@/lib/framer-features').then(res => res.default);
+
 const MinorNode = React.memo(({ loc, isActive, onEnter, onLeave }: { loc: Location, isActive: boolean, onEnter: (loc: Location) => void, onLeave: () => void }) => (
   <div
     className={`absolute group/minor cursor-pointer w-8 h-8 md:w-5 md:h-5 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-10 hover:z-30'}`}
@@ -76,7 +78,7 @@ export default function InteractiveMapPins({
   handleMouseLeave: () => void
 }) {
   return (
-    <LazyMotion features={domAnimation}>
+    <LazyMotion features={loadFeatures}>
       {locations.filter(l => l.type === 'minor_node').map((loc, idx) => (
         <MinorNode
           key={`minor-${loc.id || idx}`}