From a9d6fbd14de6bf0db1984926727a655afb95247c Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Date: Thu, 18 Sep 2025 22:41:02 +0530
Subject: [PATCH] fix: resolve blank form in analytics app installation step 3
 (#23924)

- Add mounted state to ensure component renders after hydration
- Fix hydration mismatch between server and client rendering
- Ensure ConfigureStepCard renders properly on initial load in production

Fixes the issue where GTM analytics app configuration form appears blank
on step 3 until page refresh.

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../components/apps/installation/ConfigureStepCard.tsx   | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/apps/installation/ConfigureStepCard.tsx b/apps/web/components/apps/installation/ConfigureStepCard.tsx
index b98c9431af..d33e6699a6 100644
--- a/apps/web/components/apps/installation/ConfigureStepCard.tsx
+++ b/apps/web/components/apps/installation/ConfigureStepCard.tsx
@@ -7,10 +7,10 @@ import { useFieldArray, useFormContext } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
+import type { LocationObject } from "@calcom/app-store/locations";
 import NoSSR from "@calcom/lib/components/NoSSR";
 import { locationsResolver } from "@calcom/lib/event-types/utils/locationsResolver";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { LocationObject } from "@calcom/app-store/locations";
 import type { AppCategories } from "@calcom/prisma/enums";
 import type { EventTypeMetaDataSchema, eventTypeBookingFields } from "@calcom/prisma/zod-utils";
 import { Avatar } from "@calcom/ui/components/avatar";
@@ -213,6 +213,7 @@ const ConfigureStepCardContent: FC<ConfigureStepCardProps> = (props) => {
   );
 
   const [submit, setSubmit] = useState(false);
+  const [mounted, setMounted] = useState(false);
   const allUpdated = updatedEventTypesStatus.every((item) => item.every((iitem) => iitem.updated));
 
   useEffect(() => {
@@ -222,7 +223,11 @@ const ConfigureStepCardContent: FC<ConfigureStepCardProps> = (props) => {
     }
   }, [submit, allUpdated, mainForSubmitRef]);
 
-  if (!formPortalRef?.current) {
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!formPortalRef?.current || !mounted) {
     return null;
   }