fix: UI glitch on form submit (#151)

* fix glitchy form submit

- The fix was essentially to change where loading is set to false

Also:
- Add a 500ms delay on form submit, so that the loading spinner doesn't just flash on quick req/res
- Log the user in automatically after they have signed up and redirect to /welcome

* add poppins font

src/app/signup/page.tsx

@@ -9,7 +9,9 @@ export default function SignUp() {
         <Title ta="center" mb="xl" size={"2rem"}>
           Welcome to Recipe Declutter!
         </Title>
+
         <SignUpForm />
+
         <Text ta="center" mt="md">
           Already have an account?{" "}
           <span>

src/app/theme.ts

@@ -1,5 +1,12 @@
 import { createTheme, rem } from "@mantine/core";
 
+import { Poppins } from "next/font/google";
+
+const poppins = Poppins({
+  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+});
+
 export const theme = createTheme({
   colors: {
     // Add your color
@@ -50,7 +57,7 @@ export const theme = createTheme({
   },
 
   headings: {
-    fontFamily: "Roboto, sans-serif",
+    fontFamily: `${poppins.style.fontFamily}, sans-serif`,
     sizes: {
       h1: { fontSize: rem(48) },
       h2: { fontSize: rem(24) },

src/components/LoginForm.tsx

@@ -37,6 +37,9 @@ export default function LoginForm() {
 
     values.email = values.email.toLowerCase();
 
+    // Half a second delay so that the loading spinner doesn't just flash
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
     try {
       const result = await signIn("credentials", {
         redirect: false,
@@ -46,24 +49,24 @@ export default function LoginForm() {
 
       if (result?.error) {
         setError("Invalid email or password. Please try again.");
+        setLoading(false);
       } else {
         router.push("/welcome"); // Redirect to landing page
       }
     } catch (error: unknown) {
+      setLoading(false);
+
       if (error instanceof Error) {
         setError(error.message);
       } else {
         setError("An unknown error occurred.");
       }
-    } finally {
-      setLoading(false);
     }
   };
 
   return (
     <>
       <Paper
-        radius="md"
         p={{ base: "md", sm: "xl" }}
         withBorder
         shadow="md"

src/components/SignUpForm.tsx

@@ -11,6 +11,7 @@ import {
   TextInput,
 } from "@mantine/core";
 import { hasLength, isEmail, useForm } from "@mantine/form";
+import { signIn } from "next-auth/react";
 
 type UserData = {
   email: string;
@@ -51,33 +52,48 @@ export default function SignUpForm() {
 
     userData.email = userData.email.toLowerCase();
 
+    // Half a second delay so that the loading spinner doesn't just flash
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
     try {
-      const res = await fetch("/api/signup", {
+      const signUpResponse = await fetch("/api/signup", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(userData),
       });
 
-      const data = await res.json();
+      const data = await signUpResponse.json();
 
-      if (!res.ok) {
+      if (!signUpResponse.ok) {
         throw new Error(data.message);
       }
-      router.push("/login"); // Redirect to login
+
+      const loginResponse = await signIn("credentials", {
+        redirect: false,
+        email: userData.email,
+        password: userData.password,
+      });
+
+      if (loginResponse?.error) {
+        setError("Something went wrong. Please try again.");
+        router.push("/login"); // Redirect to login if login fails
+      }
+
+      // redirect to welcome page as logged in user
+      router.push("/welcome");
     } catch (error: unknown) {
+      setLoading(false);
+
       if (error instanceof Error) {
         setError(error.message);
       } else {
         setError("An unknown error occurred.");
       }
-    } finally {
-      setLoading(false);
     }
   };
 
   return (
     <Paper
-      radius="md"
       p={{ base: "md", sm: "xl" }}
       withBorder
       shadow="md"