Fix plan page hydration error

Author: ostenbom

app/(dashboard)/pricing/submit-button.tsx

@@ -1,16 +1,22 @@
 "use client";
 
 import { ArrowRight, Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
 import { useFormStatus } from "react-dom";
 import { Button } from "@/components/ui/button";
 
 export function SubmitButton() {
 	const { pending } = useFormStatus();
+	const [isHydrated, setIsHydrated] = useState(false);
+
+	useEffect(() => {
+		setIsHydrated(true);
+	}, []);
 
 	return (
 		<Button
 			type="submit"
-			disabled={pending}
+			disabled={pending || !isHydrated}
 			variant="outline"
 			className="w-full rounded-full"
 		>

package.json

@@ -43,6 +43,7 @@
 	"devDependencies": {
 		"@biomejs/biome": "^2.2.2",
 		"@playwright/test": "^1.55.0",
-		"@types/bun": "^1.2.21"
+		"@types/bun": "^1.2.21",
+		"endform": "^0.35.0"
 	}
 }

playwright.config.ts

@@ -22,7 +22,7 @@ export default defineConfig({
 	/* Retry on CI only */
 	retries: process.env.CI ? 2 : 0,
 	/* Opt out of parallel tests on CI. */
-	workers: process.env.CI ? 1 : undefined,
+	workers: "50%",
 	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
 	reporter: [["html", { open: "never" }]],
 	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */

pnpm-lock.yaml

@@ -67,8 +67,8 @@ Here's what we'll cover in each step:
 />
 
 <LinkCard
-  title="Speeding up with endform"
-  description="Use endform to speed up your test suite."
+  title="Speeding up with Endform"
+  description="Use Endform to speed up your test suite."
   href="/docs/tutorial/speeding-up-with-endform"
 />
 

tutorial/stage-0-baseline/from-cowboy-to-confidence.mdx

@@ -1,5 +1,5 @@
 ---
-title: Speeding up with endform
+title: Speeding up with Endform
 description: Use endform to speed up your test suite.
 sidebar:
   order: 4