diff --git a/src/app/(auth)/sign-in/signin-form.tsx b/src/app/(auth)/sign-in/signin-form.tsx
index 01aa5ceb..22d20478 100644
--- a/src/app/(auth)/sign-in/signin-form.tsx
+++ b/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 && (
           <>
diff --git a/src/app/(auth)/sign-up/signup-form.tsx b/src/app/(auth)/sign-up/signup-form.tsx
index c5dc1f48..422585cc 100644
--- a/src/app/(auth)/sign-up/signup-form.tsx
+++ b/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>