From 8d73d15b8a38bb918e64c36113434ad0b2e16cdd Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Fri, 25 Aug 2023 02:10:01 +0530
Subject: [PATCH] perf: Lazy load framer motion stuff as much as we can
 (#10876)

---
 packages/features/bookings/Booker/Booker.tsx          | 5 +++--
 packages/features/bookings/Booker/framer-features.tsx | 3 +++
 2 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 packages/features/bookings/Booker/framer-features.tsx

diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index a5f183cc3a..fb53c0e7f3 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -1,4 +1,4 @@
-import { LazyMotion, domAnimation, m, AnimatePresence } from "framer-motion";
+import { LazyMotion, m, AnimatePresence } from "framer-motion";
 import dynamic from "next/dynamic";
 import { useEffect, useRef } from "react";
 import StickyBox from "react-sticky-box";
@@ -26,6 +26,7 @@ import { validateLayout } from "./utils/layout";
 import { getQueryParam } from "./utils/query-param";
 import { useBrandColors } from "./utils/use-brand-colors";
 
+const loadFramerFeatures = () => import("./framer-features").then((res) => res.default);
 const PoweredBy = dynamic(() => import("@calcom/ee/components/PoweredBy"));
 const UnpublishedEntity = dynamic(() => import("@calcom/ui").then((mod) => mod.UnpublishedEntity));
 const DatePicker = dynamic(() => import("./components/DatePicker").then((mod) => mod.DatePicker), {
@@ -319,7 +320,7 @@ export const Booker = (props: BookerProps) => {
   if (props.isAway) return <Away />;
 
   return (
-    <LazyMotion features={domAnimation}>
+    <LazyMotion strict features={loadFramerFeatures}>
       <BookerComponent {...props} />
     </LazyMotion>
   );
diff --git a/packages/features/bookings/Booker/framer-features.tsx b/packages/features/bookings/Booker/framer-features.tsx
new file mode 100644
index 0000000000..95d798ae6e
--- /dev/null
+++ b/packages/features/bookings/Booker/framer-features.tsx
@@ -0,0 +1,3 @@
+import { domAnimation } from "framer-motion";
+
+export default domAnimation;