From 7015c8909fc253c74fad1d0887455991fe2d94fe Mon Sep 17 00:00:00 2001
From: DmytroHryshyn <125881252+DmytroHryshyn@users.noreply.github.com>
Date: Tue, 2 Jan 2024 15:56:50 +0200
Subject: [PATCH] fix: fix-animations on event-types/[type] page (#12900)

---
 apps/web/package.json                       |  2 +-
 apps/web/pages/event-types/[type]/index.tsx | 26 +++++++++++++++++++++
 packages/ui/package.json                    |  2 +-
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 4fa8646ca1..90d4f66f7d 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -39,7 +39,7 @@
     "@calcom/tsconfig": "*",
     "@calcom/ui": "*",
     "@daily-co/daily-js": "^0.37.0",
-    "@formkit/auto-animate": "^1.0.0-beta.5",
+    "@formkit/auto-animate": "^0.8.1",
     "@glidejs/glide": "^3.5.2",
     "@hookform/error-message": "^2.0.0",
     "@hookform/resolvers": "^2.9.7",
diff --git a/apps/web/pages/event-types/[type]/index.tsx b/apps/web/pages/event-types/[type]/index.tsx
index 38baf14feb..cdad0b5c1c 100644
--- a/apps/web/pages/event-types/[type]/index.tsx
+++ b/apps/web/pages/event-types/[type]/index.tsx
@@ -522,6 +522,32 @@ const EventTypePage = (props: EventTypeSetupProps) => {
   const [slugExistsChildrenDialogOpen, setSlugExistsChildrenDialogOpen] = useState<ChildrenEventType[]>([]);
   const slug = formMethods.watch("slug") ?? eventType.slug;
 
+  // Optional prerender all tabs after 300 ms on mount
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      const Components = [
+        EventSetupTab,
+        EventAvailabilityTab,
+        EventTeamTab,
+        EventLimitsTab,
+        EventAdvancedTab,
+        EventInstantTab,
+        EventRecurringTab,
+        EventAppsTab,
+        EventWorkflowsTab,
+        EventWebhooksTab,
+      ];
+
+      Components.forEach((C) => {
+        // @ts-expect-error Property 'render' does not exist on type 'ComponentClass
+        C.render.preload();
+      });
+    }, 300);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
   return (
     <>
       <EventTypeSingleLayout
diff --git a/packages/ui/package.json b/packages/ui/package.json
index ef421807d4..9802cdc212 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -24,7 +24,7 @@
   "dependencies": {
     "@calcom/lib": "*",
     "@calcom/trpc": "*",
-    "@formkit/auto-animate": "^1.0.0-beta.5",
+    "@formkit/auto-animate": "^0.8.1",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-popover": "^1.0.2",