Like Toggle Data Loading instead of Pending

Using Tailwind clever

Author: aledbrown

app/Http/Controllers/PuppyController.php

@@ -9,6 +9,7 @@ class PuppyController extends Controller
 {
     public function like(Request $request, Puppy $puppy)
     {
+        sleep(3);
         $puppy->likedBy()->toggle($request->user()->id);
         return back();
     }

resources/js/app.tsx

@@ -25,7 +25,7 @@ createInertiaApp({
         );
     },
     progress: {
-        color: '#4B5563',
+        color: 'var(--color-cyan-500)',
     },
 });
 

resources/js/components/LikeToggle.tsx

@@ -1,11 +1,10 @@
-import { useState } from 'react';
-import { Heart, LoaderCircle } from 'lucide-react';
+import { like } from '@/routes/puppies';
 import { Puppy, SharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/react';
-import { like } from '@/routes/puppies';
+import { Heart, LoaderCircle } from 'lucide-react';
+import { clsx } from 'clsx';
 
 export function LikeToggle({ puppy }: { puppy: Puppy }) {
-    const [pending, setPending] = useState(false);
     const { auth } = usePage<SharedData>().props;
 
     return (
@@ -16,17 +15,15 @@ export function LikeToggle({ puppy }: { puppy: Puppy }) {
             className={`group ${auth.user ? 'cursor-pointer' : 'cursor-not-allowed'}`}
             disabled={!auth?.user}
         >
-            {pending ? (
-                <LoaderCircle className="animate-spin stroke-slate-300" />
-            ) : (
-                <Heart
-                    className={
-                        puppy.likedBy.includes(auth?.user?.id) && auth?.user
-                            ? 'fill-pink-500 stroke-none'
-                            : 'stroke-slate-200 group-hover:stroke-slate-300'
-                    }
-                />
-            )}
+            <LoaderCircle className="hidden animate-spin stroke-slate-300 group-data-loading:block" />
+            <Heart
+                className={clsx(
+                    puppy.likedBy.includes(auth?.user?.id) && auth?.user
+                        ? 'fill-pink-500 stroke-none'
+                        : 'stroke-slate-200 group-hover:stroke-slate-300',
+                    'group-data-loading:hidden',
+                )}
+            />
         </Link>
     );
 }

resources/js/components/Shortlist.tsx

@@ -52,18 +52,6 @@ function DeleteButton({ puppy }: { puppy: Puppy }) {
             preserveScroll
             method={'patch'}
             href={like(puppy.id)}
-            // onClick={async () => {
-            //     setPending(true);
-            //     const updatedPuppy = await toggleLikedStatus(id);
-            //     setPuppies((prevPups) => {
-            //         return prevPups.map((existingPuppy) =>
-            //             existingPuppy.id === updatedPuppy.id
-            //                 ? updatedPuppy
-            //                 : existingPuppy,
-            //         );
-            //     }); // works if api returns just the updated puppy
-            //     setPending(false);
-            // }}
             className="group h-full border-l border-slate-100 px-2 hover:bg-slate-100"
             disabled={pending}
         >