dash: avoid hydration error in LoginLayout (#43542)

GitOrigin-RevId: b6e8b6514284b8c7800bd48a088150050e502e88

Author: Nicolapps

npm-packages/dashboard/src/components/login/Flourish.tsx

@@ -0,0 +1,36 @@
+import { useWindowSize } from "react-use";
+import { useEffect, useState } from "react";
+import FlourishTop from "./images/flourish-top.svg";
+import FlourishBottom from "./images/flourish-bottom.svg";
+import FlourishBottomRight from "./images/flourish-bottom-right.svg";
+import FlourishRight from "./images/flourish-right.svg";
+import FlourishLeft from "./images/flourish-left.svg";
+
+export function Flourish() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const { height } = useWindowSize();
+
+  return mounted && height > 500 ? (
+    <div className="hidden md:block dark:hidden">
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 translate-y-[-20%]">
+        <FlourishTop />
+      </div>
+      <div className="absolute bottom-0 left-1/2 -translate-x-1/2">
+        <FlourishBottom />
+      </div>
+      <div className="absolute right-0 bottom-[35%]">
+        <FlourishRight />
+      </div>
+      <div className="absolute bottom-[20%] left-0 -translate-y-1/2">
+        <FlourishLeft />
+      </div>
+      <div className="absolute right-[8%] bottom-0">
+        <FlourishBottomRight />
+      </div>
+    </div>
+  ) : null;
+}

npm-packages/dashboard/src/layouts/LoginLayout.tsx

@@ -1,13 +1,7 @@
 import React, { ReactNode } from "react";
 import { ConvexLogo } from "@common/elements/ConvexLogo";
 import { GoogleAnalytics } from "elements/GoogleAnalytics";
-
-import FlourishTop from "components/login/images/flourish-top.svg";
-import FlourishBottom from "components/login/images/flourish-bottom.svg";
-import FlourishBottomRight from "components/login/images/flourish-bottom-right.svg";
-import FlourishRight from "components/login/images/flourish-right.svg";
-import FlourishLeft from "components/login/images/flourish-left.svg";
-import { useWindowSize } from "react-use";
+import { Flourish } from "components/login/Flourish";
 
 type LayoutProps = {
   children: ReactNode;
@@ -31,26 +25,3 @@ export function LoginLayout({ children }: LayoutProps) {
     </div>
   );
 }
-
-export function Flourish() {
-  const { height } = useWindowSize();
-  return height > 500 ? (
-    <div className="hidden md:block dark:hidden">
-      <div className="absolute top-0 left-1/2 -translate-x-1/2 translate-y-[-20%]">
-        <FlourishTop />
-      </div>
-      <div className="absolute bottom-0 left-1/2 -translate-x-1/2">
-        <FlourishBottom />
-      </div>
-      <div className="absolute right-0 bottom-[35%]">
-        <FlourishRight />
-      </div>
-      <div className="absolute bottom-[20%] left-0 -translate-y-1/2">
-        <FlourishLeft />
-      </div>
-      <div className="absolute right-[8%] bottom-0">
-        <FlourishBottomRight />
-      </div>
-    </div>
-  ) : null;
-}

npm-packages/dashboard/src/pages/referral/[code].tsx

@@ -1,11 +1,11 @@
 import { GetServerSideProps } from "next";
-import { Flourish } from "layouts/LoginLayout";
 import Head from "next/head";
 import { useParams, usePathname } from "next/navigation";
 import Background from "components/login/images/background.svg";
 import { ConvexLogo } from "@common/elements/ConvexLogo";
 import { RedeemReferralLanding } from "components/referral/RedeemReferralLanding";
 import { getSession } from "server/workos";
+import { Flourish } from "components/login/Flourish";
 
 /**
  *  This page powers two routes via Next.js rewrites in next.config.js: