From ba5dafbb94098de04ae0981e95a2565d7f121b78 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Thu, 10 Apr 2025 10:54:58 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=9A=20(lp)=20Fix=20window=20is=20not?=
 =?UTF-8?q?=20defined=20error=20from=20embed=20bubble=20loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/landing-page/app/components/ClientOnly.tsx    | 13 +++++++++++++
 apps/landing-page/app/components/TypebotBubble.tsx |  7 ++++---
 apps/landing-page/app/hooks/useHydrated.ts         | 13 +++++++++++++
 3 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 apps/landing-page/app/components/ClientOnly.tsx
 create mode 100644 apps/landing-page/app/hooks/useHydrated.ts

diff --git a/apps/landing-page/app/components/ClientOnly.tsx b/apps/landing-page/app/components/ClientOnly.tsx
new file mode 100644
index 000000000..a3bae4885
--- /dev/null
+++ b/apps/landing-page/app/components/ClientOnly.tsx
@@ -0,0 +1,13 @@
+// Copied from https://github.com/sergiodxa/remix-utils/blob/main/src/react/use-hydrated.ts
+
+import { useHydrated } from "@/hooks/useHydrated";
+import { type ReactNode, Suspense } from "react";
+
+type Props = {
+  children: ReactNode;
+  fallback?: ReactNode;
+};
+
+export const ClientOnly = ({ children, fallback = null }: Props) => (
+  <Suspense fallback={fallback}>{useHydrated() ? children : fallback}</Suspense>
+);
diff --git a/apps/landing-page/app/components/TypebotBubble.tsx b/apps/landing-page/app/components/TypebotBubble.tsx
index 89a62afc8..cc2b4e24c 100644
--- a/apps/landing-page/app/components/TypebotBubble.tsx
+++ b/apps/landing-page/app/components/TypebotBubble.tsx
@@ -1,11 +1,12 @@
-import { Suspense, lazy } from "react";
+import { lazy } from "react";
+import { ClientOnly } from "./ClientOnly";
 
 export const Bubble = lazy(() =>
   import("@typebot.io/react").then((m) => ({ default: m.Bubble })),
 );
 
 export const TypebotBubble = () => (
-  <Suspense fallback={<div className="size-12" />}>
+  <ClientOnly fallback={<div className="size-12" />}>
     <Bubble
       typebot="typebot-demo"
       theme={{
@@ -15,5 +16,5 @@ export const TypebotBubble = () => (
         },
       }}
     />
-  </Suspense>
+  </ClientOnly>
 );
diff --git a/apps/landing-page/app/hooks/useHydrated.ts b/apps/landing-page/app/hooks/useHydrated.ts
new file mode 100644
index 000000000..7bf890427
--- /dev/null
+++ b/apps/landing-page/app/hooks/useHydrated.ts
@@ -0,0 +1,13 @@
+import { useSyncExternalStore } from "react";
+
+function subscribe() {
+  return () => {};
+}
+
+export function useHydrated() {
+  return useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false,
+  );
+}