💚 (lp) Fix window is not defined error from embed bubble loading

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>
+);

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>
 );

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,
+  );
+}