adding spinners to buttons

Author: nikolovlazar

app/(auth)/sign-in/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { Loader } from 'lucide-react';
 
 import Link from 'next/link';
 import { Button } from '../../_components/ui/button';
@@ -18,16 +19,20 @@ import { signIn } from '../actions';
 
 export default function SignIn() {
   const [error, setError] = useState<string>();
+  const [loading, setLoading] = useState(false);
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
+    if (loading) return;
 
     const formData = new FormData(event.currentTarget);
 
+    setLoading(true);
     const res = await signIn(formData);
     if (res && res.error) {
       setError(res.error);
     }
+    setLoading(false);
   };
 
   return (
@@ -57,8 +62,8 @@ export default function SignIn() {
               <Label htmlFor="password">Password</Label>
               <Input id="password" type="password" name="password" required />
             </div>
-            <Button type="submit" className="w-full">
-              Login
+            <Button type="submit" disabled={loading} className="w-full">
+              {loading ? <Loader className="animate-spin" /> : 'Login'}
             </Button>
           </div>
           <div className="mt-4 text-center text-sm">

app/(auth)/sign-up/page.tsx

@@ -15,12 +15,15 @@ import { Input } from '../../_components/ui/input';
 import { Label } from '../../_components/ui/label';
 import { Separator } from '../../_components/ui/separator';
 import { signUp } from '../actions';
+import { Loader } from 'lucide-react';
 
 export default function SignUp() {
   const [error, setError] = useState<string>();
+  const [loading, setLoading] = useState(false);
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
+    if (loading) return;
 
     const formData = new FormData(event.currentTarget);
 
@@ -32,10 +35,12 @@ export default function SignUp() {
       return;
     }
 
+    setLoading(true);
     const res = await signUp(formData);
     if (res && res.error) {
       setError(res.error);
     }
+    setLoading(false);
   };
 
   return (
@@ -74,8 +79,12 @@ export default function SignUp() {
                 required
               />
             </div>
-            <Button type="submit" className="w-full">
-              Create an account
+            <Button type="submit" disabled={loading} className="w-full">
+              {loading ? (
+                <Loader className="animate-spin" />
+              ) : (
+                'Create an account'
+              )}
             </Button>
           </div>
           <div className="mt-4 text-center text-sm">

app/add-todo.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Plus } from 'lucide-react';
-import { useRef } from 'react';
+import { Loader, Plus } from 'lucide-react';
+import { useRef, useState } from 'react';
 import { toast } from 'sonner';
 
 import { Button } from './_components/ui/button';
@@ -10,11 +10,15 @@ import { createTodo } from './actions';
 
 export function CreateTodo() {
   const inputRef = useRef<HTMLInputElement>(null);
+  const [loading, setLoading] = useState(false);
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
+    if (loading) return;
 
     const formData = new FormData(event.currentTarget);
+
+    setLoading(true);
     const res = await createTodo(formData);
 
     if (res) {
@@ -28,6 +32,7 @@ export function CreateTodo() {
         }
       }
     }
+    setLoading(false);
   };
 
   return (
@@ -38,8 +43,8 @@ export function CreateTodo() {
         className="flex-1"
         placeholder="Take out trash"
       />
-      <Button size="icon" type="submit">
-        <Plus />
+      <Button size="icon" disabled={loading} type="submit">
+        {loading ? <Loader className="animate-spin" /> : <Plus />}
       </Button>
     </form>
   );

app/todos.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useState } from 'react';
-import { Trash } from 'lucide-react';
+import { Loader, Trash } from 'lucide-react';
 import { toast } from 'sonner';
 
 import { Checkbox } from './_components/ui/checkbox';
@@ -15,6 +15,7 @@ export function Todos({ todos }: { todos: Todo[] }) {
   const [bulkMode, setBulkMode] = useState(false);
   const [dirty, setDirty] = useState<number[]>([]);
   const [deleted, setDeleted] = useState<number[]>([]);
+  const [loading, setLoading] = useState(false);
 
   const handleToggle = useCallback(
     async (id: number) => {
@@ -63,7 +64,9 @@ export function Todos({ todos }: { todos: Todo[] }) {
   );
 
   const updateAll = async () => {
+    setLoading(true);
     const res = await bulkUpdate(dirty, deleted);
+    setLoading(false);
     setBulkMode(false);
     setDirty([]);
     setDeleted([]);
@@ -126,7 +129,9 @@ export function Todos({ todos }: { todos: Todo[] }) {
       </ul>
       {bulkMode ? (
         <div className="w-full grid grid-cols-2 gap-2">
-          <Button onClick={updateAll}>Update all</Button>
+          <Button disabled={loading} onClick={updateAll}>
+            {loading ? <Loader className="animate-spin" /> : 'Update all'}
+          </Button>
           <Button variant="secondary" onClick={() => setBulkMode(false)}>
             Cancel
           </Button>