Wrap cope points in suspense boundaries (#28)

Author: Jibola

{{cookiecutter.project_slug}}/frontend/app/login/page.tsx

@@ -1,11 +1,11 @@
-"use client";
-
-import { useAppDispatch, useAppSelector } from "../lib/hooks";
-import { login, loggedIn } from "../lib/slices/authSlice";
-import { useRouter, useSearchParams } from "next/navigation";
-import { tokenIsTOTP, tokenParser } from "../lib/utilities";
-import { Switch } from "@headlessui/react";
-import { useEffect, useState } from "react";
+"use client"
+
+import { useAppDispatch, useAppSelector } from "../lib/hooks"
+import { login, loggedIn } from "../lib/slices/authSlice"
+import { useRouter, useSearchParams } from "next/navigation"
+import { tokenIsTOTP, tokenParser } from "../lib/utilities"
+import { Switch } from "@headlessui/react"
+import { Suspense, useEffect, useState } from "react"
 import {
   FieldErrors,
   FieldValues,
@@ -101,12 +101,11 @@ function LoginMessage(oauth: boolean) {
     );
 }
 
-export default function Page() {
-  const [oauth, setOauth] = useState(false);
-  const dispatch = useAppDispatch();
-  const accessToken = useAppSelector((state) => state.tokens.access_token);
-  const isLoggedIn = useAppSelector((state) => loggedIn(state));
-
+function UnsuspendedPage() {
+  const [oauth, setOauth] = useState(false)
+  const dispatch = useAppDispatch()
+  const accessToken = useAppSelector((state) => state.tokens.access_token)
+  const isLoggedIn = useAppSelector((state) => loggedIn(state))
   const searchParams = useSearchParams();
   const router = useRouter();
 
@@ -249,3 +248,7 @@ export default function Page() {
     </main>
   );
 }
+
+export default function Page() {
+  return <Suspense><UnsuspendedPage /></Suspense>
+}

{{cookiecutter.project_slug}}/frontend/app/page.tsx

@@ -1,14 +1,13 @@
 "use client";
 
-import { ChevronRightIcon } from "@heroicons/react/20/solid";
-import Link from "next/link";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useEffect } from "react";
-import { useAppDispatch, useAppSelector } from "./lib/hooks";
-import { loggedIn, magicLogin } from "./lib/slices/authSlice";
-import { tokenIsTOTP } from "./lib/utilities";
-import { token } from "./lib/slices/tokensSlice";
-
+import { ChevronRightIcon } from "@heroicons/react/20/solid"
+import Link from "next/link"
+import { useRouter, useSearchParams } from "next/navigation"
+import { Suspense, useEffect } from "react"
+import { useAppDispatch, useAppSelector } from "./lib/hooks"
+import { loggedIn, magicLogin } from "./lib/slices/authSlice"
+import { tokenIsTOTP } from "./lib/utilities"
+import { token } from "./lib/slices/tokensSlice"
 const github = {
   name: "GitHub",
   href: "https://github.com/mongodb-labs/full-stack-fastapi-mongodb",
@@ -28,9 +27,9 @@ const github = {
 const redirectTOTP = "/totp";
 const redirectAfterLogin = "/";
 
-export default function Page() {
-  const router = useRouter();
-  const query = useSearchParams();
+function UnsuspendedPage() {
+  const router = useRouter()
+  const query = useSearchParams()
 
   const dispatch = useAppDispatch();
 
@@ -180,3 +179,7 @@ export default function Page() {
     </main>
   );
 }
+
+export default function Page() {
+  return <Suspense><UnsuspendedPage /></Suspense>
+}

{{cookiecutter.project_slug}}/frontend/app/reset-password/page.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { useRouter, useSearchParams } from "next/navigation";
-import { useAppDispatch } from "../lib/hooks";
-import { useForm } from "react-hook-form";
-import { resetPassword } from "../lib/slices/authSlice";
-import { useEffect } from "react";
-import Image from "next/image";
+import { useRouter, useSearchParams } from "next/navigation"
+import { useAppDispatch } from "../lib/hooks"
+import { useForm } from "react-hook-form"
+import { resetPassword } from "../lib/slices/authSlice"
+import { Suspense, useEffect } from "react"
+import Image from "next/image"
 
 const schema = {
   password: { required: true, minLength: 8, maxLength: 64 },
@@ -34,8 +34,8 @@ const renderError = (type: LiteralUnion<keyof RegisterOptions, string>) => {
   }
 };
 
-export default function ResetPassword() {
-  const dispatch = useAppDispatch();
+function UnsuspendedResetPassword() {
+  const dispatch = useAppDispatch()
 
   const router = useRouter();
   const query = useSearchParams();
@@ -154,3 +154,7 @@ export default function ResetPassword() {
     </main>
   );
 }
+
+export default function ResetPassword() {
+  return <Suspense><UnsuspendedResetPassword /></Suspense>
+}