Merge pull request #107 from FleetAdmiralJakob/loading-spinner

feat(singup-signin): loading spinner on signup and signin page

src/app/(auth)/sign-in/signin-form.tsx

@@ -19,6 +19,7 @@ import { useRouter } from "next/navigation";
 import { useSignIn } from "@clerk/nextjs";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { LoaderCircle } from "lucide-react";
 
 export const formSchema = z.object({
   username: z
@@ -195,7 +196,14 @@ export function SignInForm() {
           )}
         />
         <Button disabled={isLoading} type="submit" aria-disabled={isLoading}>
-          Submit
+          {isLoading ? (
+            <>
+              <LoaderCircle className="mr-1.5 animate-spin p-0.5" />{" "}
+              Processing...
+            </>
+          ) : (
+            "Submit"
+          )}
         </Button>
         {wholeFormError && (
           <>

src/app/(auth)/sign-up/signup-form.tsx

@@ -22,6 +22,7 @@ import { useRouter } from "next/navigation";
 import { cn } from "~/lib/utils";
 import { useConvexAuth, useMutation } from "convex/react";
 import { api } from "../../../../convex/_generated/api";
+import { LoaderCircle } from "lucide-react";
 
 export function SignUpForm() {
   const [formIsLoading, setFormIsLoading] = React.useState(false);
@@ -262,7 +263,14 @@ export function SignUpForm() {
           type="submit"
           aria-disabled={formIsLoading}
         >
-          Submit
+          {formIsLoading ? (
+            <>
+              <LoaderCircle className="mr-1.5 animate-spin p-0.5" />{" "}
+              Processing...
+            </>
+          ) : (
+            "Submit"
+          )}
         </Button>
       </form>
     </Form>