Merge pull request #11 from cs3216-a3-group-4/seeleng/fix-suspense

fix: suspense again
jippy-the-frog · Sep 20, 2024 · 2f22b62 · 2f22b62
2 parents aafeabd + 2ff3a88
commit 2f22b62
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 26 deletions.
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -25,6 +25,8 @@ jobs:
         run: npm install
       - name: ESLint
         run: npm run lint
+      - name: Build
+        run: npm run build
   backend:
     name: backend (format, lint)
     runs-on: ubuntu-latest

diff --git a/frontend/app/auth/google/layout.tsx b/frontend/app/auth/google/layout.tsx
@@ -0,0 +1,7 @@
+import { Suspense } from "react";
+
+export default function Layout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return <Suspense>{children}</Suspense>;
+}
diff --git a/frontend/app/auth/google/page.tsx b/frontend/app/auth/google/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Suspense, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { CheckCircleIcon } from "lucide-react";
 
@@ -37,31 +37,29 @@ export default function GoogleOAuth() {
   }, [code, router]);
 
   return (
-    <Suspense>
-      <Box className="flex flex-col m-auto w-full justify-center items-center gap-y-10">
-        <Card className="flex flex-col border-0 md:border px-6 sm:px-12 sm:py-6 shadow-none md:shadow-sm md:max-w-md text-center">
-          <CardHeader className="space-y-3">
-            <CardTitle>Sign in with Google</CardTitle>
-          </CardHeader>
+    <Box className="flex flex-col m-auto w-full justify-center items-center gap-y-10">
+      <Card className="flex flex-col border-0 md:border px-6 sm:px-12 sm:py-6 shadow-none md:shadow-sm md:max-w-md text-center">
+        <CardHeader className="space-y-3">
+          <CardTitle>Sign in with Google</CardTitle>
+        </CardHeader>
 
-          <CardContent className="flex flex-col space-y-8">
-            <Box className="flex justify-center">
-              {isLoading ? (
-                <LoadingSpinner size={64} />
-              ) : (
-                <CheckCircleIcon size={64} />
-              )}
-            </Box>
-            <CardDescription>
-              <span className="max-w-sm">
-                {isLoading
-                  ? "Hang tight! We're logging you in. This shouldn't take too long."
-                  : "All done! You should be redirected soon."}
-              </span>
-            </CardDescription>
-          </CardContent>
-        </Card>
-      </Box>
-    </Suspense>
+        <CardContent className="flex flex-col space-y-8">
+          <Box className="flex justify-center">
+            {isLoading ? (
+              <LoadingSpinner size={64} />
+            ) : (
+              <CheckCircleIcon size={64} />
+            )}
+          </Box>
+          <CardDescription>
+            <span className="max-w-sm">
+              {isLoading
+                ? "Hang tight! We're logging you in. This shouldn't take too long."
+                : "All done! You should be redirected soon."}
+            </span>
+          </CardDescription>
+        </CardContent>
+      </Card>
+    </Box>
   );
 }