Initial plan

apps/web/app/s/[surveyId]/loading.tsx

@@ -1,3 +0,0 @@
-import { LinkSurveyLoading } from "@/modules/survey/link/loading";
-
-export default LinkSurveyLoading;

apps/web/lingodotdev/client.tsx

@@ -53,9 +53,9 @@ export const I18nProvider = ({ children, language, defaultLanguage }: I18nProvid
     initializeI18n();
   }, [locale, defaultLanguage]);
 
-  // Don't render children until i18n is ready to prevent hydration issues
+  // Don't render children until i18n is ready to prevent race conditions
   if (!isReady) {
-    return <div style={{ visibility: "hidden" }}>{children}</div>;
+    return null;
   }
 
   return (

apps/web/modules/survey/link/lib/metadata-utils.test.ts

@@ -32,6 +32,16 @@ vi.mock("@/lib/styling/constants", () => ({
   },
 }));
 
+// Mock recall utility
+vi.mock("@/lib/utils/recall", () => ({
+  recallToHeadline: vi.fn((headline) => headline),
+}));
+
+// Mock text content extraction
+vi.mock("@formbricks/types/surveys/validation", () => ({
+  getTextContent: vi.fn((text) => text),
+}));
+
 describe("Metadata Utils", () => {
   // Reset all mocks before each test
   beforeEach(() => {
@@ -173,6 +183,75 @@ describe("Metadata Utils", () => {
         WEBAPP_URL: "https://test.formbricks.com",
       }));
     });
+
+    test("handles welcome card headline with HTML content", async () => {
+      const { getTextContent } = await import("@formbricks/types/surveys/validation");
+
+      const mockSurvey = {
+        id: mockSurveyId,
+        environmentId: mockEnvironmentId,
+        name: "Test Survey",
+        metadata: {},
+        languages: [],
+        welcomeCard: {
+          enabled: true,
+          timeToFinish: false,
+          showResponseCount: false,
+          headline: {
+            default: "<p>Welcome <strong>Headline</strong></p>",
+          },
+          html: {
+            default: "Welcome Description",
+          },
+        } as TSurveyWelcomeCard,
+      } as TSurvey;
+
+      vi.mocked(getSurvey).mockResolvedValue(mockSurvey);
+      vi.mocked(getTextContent).mockReturnValue("Welcome Headline");
+
+      const result = await getBasicSurveyMetadata(mockSurveyId);
+
+      expect(getTextContent).toHaveBeenCalled();
+      expect(result.title).toBe("Welcome Headline");
+    });
+
+    test("handles welcome card headline with recall variables", async () => {
+      const { recallToHeadline } = await import("@/lib/utils/recall");
+
+      const mockSurvey = {
+        id: mockSurveyId,
+        environmentId: mockEnvironmentId,
+        name: "Test Survey",
+        metadata: {},
+        languages: [],
+        welcomeCard: {
+          enabled: true,
+          timeToFinish: false,
+          showResponseCount: false,
+          headline: {
+            default: "Welcome #recall:name/fallback:User#",
+          },
+          html: {
+            default: "Welcome Description",
+          },
+        } as TSurveyWelcomeCard,
+      } as TSurvey;
+
+      vi.mocked(getSurvey).mockResolvedValue(mockSurvey);
+      vi.mocked(recallToHeadline).mockReturnValue({
+        default: "Welcome @User",
+      });
+
+      const result = await getBasicSurveyMetadata(mockSurveyId);
+
+      expect(recallToHeadline).toHaveBeenCalledWith(
+        mockSurvey.welcomeCard.headline,
+        mockSurvey,
+        false,
+        "default"
+      );
+      expect(result.title).toBe("Welcome @User");
+    });
   });
 
   describe("getSurveyOpenGraphMetadata", () => {

apps/web/modules/survey/link/lib/metadata-utils.ts

@@ -1,8 +1,10 @@
 import { Metadata } from "next";
+import { getTextContent } from "@formbricks/types/surveys/validation";
 import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getPublicDomain } from "@/lib/getPublicUrl";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { COLOR_DEFAULTS } from "@/lib/styling/constants";
+import { recallToHeadline } from "@/lib/utils/recall";
 import { getSurvey } from "@/modules/survey/lib/survey";
 
 type TBasicSurveyMetadata = {
@@ -48,7 +50,9 @@ export const getBasicSurveyMetadata = async (
   const titleFromMetadata = metadata?.title ? getLocalizedValue(metadata.title, langCode) || "" : undefined;
   const titleFromWelcome =
     welcomeCard?.enabled && welcomeCard.headline
-      ? getLocalizedValue(welcomeCard.headline, langCode) || ""
+      ? getTextContent(
+          getLocalizedValue(recallToHeadline(welcomeCard.headline, survey, false, langCode), langCode)
+        ) || ""
       : undefined;
   let title = titleFromMetadata || titleFromWelcome || survey.name;
 

apps/web/modules/survey/link/loading.tsx

@@ -1,11 +0,0 @@
-"use client";
-export const LinkSurveyLoading = () => {
-  return (
-    <div className="flex h-full w-full items-center justify-center">
-      <div className="flex h-1/2 w-3/4 flex-col sm:w-1/2 lg:w-1/4">
-        <div className="ph-no-capture h-16 w-1/3 animate-pulse rounded-lg bg-slate-200 font-medium text-slate-900"></div>
-        <div className="ph-no-capture mt-4 h-full animate-pulse rounded-lg bg-slate-200 text-slate-900"></div>
-      </div>
-    </div>
-  );
-};