From bd80881e27d8b3baeb800df89df1d7964f49bcc5 Mon Sep 17 00:00:00 2001
From: Dorian Niemiec <dorian.niemiec@svrjs.org>
Date: Tue, 10 Dec 2024 21:04:36 +0100
Subject: [PATCH] fix: wrap the newsletter unsubscription form in a Suspense
 component

---
 app/(root)/unsubscribe/page.tsx | 66 +++++++++++++++++++--------------
 1 file changed, 39 insertions(+), 27 deletions(-)

diff --git a/app/(root)/unsubscribe/page.tsx b/app/(root)/unsubscribe/page.tsx
index d3798d5..1c90b0c 100644
--- a/app/(root)/unsubscribe/page.tsx
+++ b/app/(root)/unsubscribe/page.tsx
@@ -1,14 +1,12 @@
 "use client";
 import Newsletter from "@/components/shared/Newsletter";
-import React, { useState } from "react";
+import React, { Suspense, useState } from "react";
 import { ReadonlyURLSearchParams, useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { useToast } from "@/components/ui/use-toast";
 import HCaptcha from "@hcaptcha/react-hcaptcha";
 
-const UnsubscribePage = (props: {
-  searchParams: Promise<{ id: string | undefined }>;
-}) => {
+const UnsubscribeForm = () => {
   const searchParams = useSearchParams() as ReadonlyURLSearchParams;
   const unsubscribeId = searchParams.has("id")
     ? searchParams.get("id")
@@ -56,6 +54,35 @@ const UnsubscribePage = (props: {
     }
   };
 
+  return (
+    <form
+      className="mx-auto text-center"
+      onSubmit={(e: React.FormEvent) => {
+        e.preventDefault();
+        setShowCaptcha(true);
+      }}
+    >
+      <Button
+        type="submit"
+        variant={"default"}
+        className="mt-2"
+        disabled={loading}
+      >
+        <div className="flex items-center justify-center">
+          <span className="tracking-tight font-semibold">Unsubscribe</span>
+        </div>
+      </Button>
+      {showCaptcha && (
+        <HCaptcha
+          sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
+          onVerify={handleCaptchaVerify}
+        />
+      )}
+    </form>
+  );
+};
+
+const UnsubscribePage = () => {
   return (
     <section
       id="vulnerabilities"
@@ -68,30 +95,15 @@ const UnsubscribePage = (props: {
         Are you sure to unsubscribe from the newsletter? You will no longer
         receive updates from the newsletter.
       </p>
-      <form
-        className="mx-auto text-center"
-        onSubmit={(e: React.FormEvent) => {
-          e.preventDefault();
-          setShowCaptcha(true);
-        }}
+      <Suspense
+        fallback={
+          <p className="md:text-lg text-muted-foreground text-start mb-6">
+            Loading unsubscription form...
+          </p>
+        }
       >
-        <Button
-          type="submit"
-          variant={"default"}
-          className="mt-2"
-          disabled={loading}
-        >
-          <div className="flex items-center justify-center">
-            <span className="tracking-tight font-semibold">Unsubscribe</span>
-          </div>
-        </Button>
-        {showCaptcha && (
-          <HCaptcha
-            sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
-            onVerify={handleCaptchaVerify}
-          />
-        )}
-      </form>
+        <UnsubscribeForm />
+      </Suspense>
     </section>
   );
 };