perf(motion): lazy-load framer-motion via LazyMotion + m (~12KB gzip/component)

[DipeshRajoria007]

What

Lazy-load framer-motion features in grauity's animated components via LazyMotion + the lightweight m component, instead of importing the full eager motion.* API.

A new shared provider common/motion.tsx:

import { domAnimation, LazyMotion } from 'framer-motion';

const GrauityLazyMotion = ({ children }) => (
    <LazyMotion features={domAnimation}>{children}</LazyMotion>
);

The 7 animated components — Modal, Drawer, BottomSheet, Overlay, PopOver, Accordion, DropdownMenu — now:

• wrap their render tree in <GrauityLazyMotion>,
• use styled(m.div) instead of styled(motion.div) (*.styles.ts),
• use m.* instead of inline motion.* (Accordion).

Why (grauity perf)

domAnimation bundles initial / animate / exit / variants / transition — every animation these components actually use — while excluding the drag / layout / pan / gesture features that eager motion.* always pulls in. grauity uses none of those excluded features.

Measured impact

Bundling each animated component on its own (esbuild, minified, react/react-dom external), before (motion) vs after (m + LazyMotion):

Component	gzip before → after	raw before → after
NSModal	87.6 → 75.6 KB (−12.0)	278.7 → 237.4 KB (−41.3)
NSDrawer	86.1 → 74.1 KB (−12.0)	272.1 → 230.8 KB (−41.3)
NSBottomSheet	86.4 → 74.3 KB (−12.1)	272.9 → 231.6 KB
NSAccordion	86.2 → 74.2 KB (−12.0)	272.6 → 231.3 KB
NSPopOver	85.8 → 73.7 KB (−12.1)	270.7 → 229.4 KB
NSOverlay	85.8 → 73.7 KB (−12.1)	270.7 → 229.4 KB
NSDropdownMenu	85.8 → 73.7 KB (−12.1)	270.7 → 229.4 KB

~12 KB gzip (~41 KB raw, ~14%) off every animated component, no public API or runtime-behaviour change.

No public API change

Component props, exports, and animation behaviour are unchanged. This builds on the tree-shakeable tsup build (base branch build/tsup-tree-shaking), so consumers that don't import an animated component pay nothing, and those that do now ship less framer-motion.

Testing — no regression

• tsc --noEmit: ✅ clean
• eslint: ✅ clean
• prettier --check: ✅ clean
• jest: ✅ 46 suites / 412 tests pass
• tsup build-lib: ✅ builds, types + dts shim emitted
• Real-browser (Vite + Playwright, real framer-motion under LazyMotion):
  • Modal opens (enter animation, m.div + LazyMotion) — ✅ PASS
  • Modal closes: #modal-body present mid-exit, then unmounted — ✅ PASS (this is the critical check — confirms AnimatePresence exit animation works under LazyMotion/domAnimation)
  • Accordion expands (m.div) — ✅ PASS
  • Zero framer-motion / LazyMotion console errors (a missing-feature misconfiguration would log one)

Files

• common/motion.tsx — new shared LazyMotion(domAnimation) provider
• ui/elements/{Modal,Drawer,BottomSheet,Overlay,PopOver,Accordion,DropdownMenu}/* — wrap return in <GrauityLazyMotion>; motion.* → m.*
• __mocks__/framer-motion.tsx — add m / LazyMotion / domAnimation / domMax to the test mock

🤖 Generated with Claude Code