Controller Index and Shortlist Delete Spinner

Data Loading set to variable and Start Finish

Author: aledbrown

app/Http/Controllers/PuppyController.php

@@ -2,14 +2,25 @@
 
 namespace App\Http\Controllers;
 
+use App\Http\Resources\PuppyResource;
 use App\Models\Puppy;
 use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Laravel\Fortify\Features;
 
 class PuppyController extends Controller
 {
+    public function index()
+    {
+        return Inertia::render('welcome', [
+            'canRegister' => Features::enabled(Features::registration()),
+            'puppies' => PuppyResource::collection(Puppy::get()->load(['user', 'likedBy'])),
+        ]);
+    }
+
     public function like(Request $request, Puppy $puppy)
     {
-        sleep(3);
+        sleep(1);
         $puppy->likedBy()->toggle($request->user()->id);
         return back();
     }

resources/js/components/Shortlist.tsx

@@ -1,16 +1,10 @@
-import { Dispatch, SetStateAction, useState } from 'react';
+import { like } from '@/routes/puppies';
 import { Puppy, SharedData } from '@/types';
-import { Heart, LoaderCircle, X } from 'lucide-react';
 import { Link, usePage } from '@inertiajs/react';
-import { like } from '@/routes/puppies';
+import { Heart, LoaderCircle, X } from 'lucide-react';
+import { useState } from 'react';
 
-export function Shortlist({
-    puppies,
-    // setPuppies,
-}: {
-    puppies: Puppy[];
-    // setPuppies: Dispatch<SetStateAction<Puppy[]>>;
-}) {
+export function Shortlist({ puppies }: { puppies: Puppy[] }) {
     const { auth } = usePage<SharedData>().props;
 
     return (
@@ -45,14 +39,18 @@ export function Shortlist({
     );
 }
 
-function DeleteButton({ puppy }: { puppy: Puppy }) {
+export function DeleteButton({ puppy }: { puppy: Puppy }) {
     const [pending, setPending] = useState(false);
+
     return (
         <Link
             preserveScroll
             method={'patch'}
             href={like(puppy.id)}
             className="group h-full border-l border-slate-100 px-2 hover:bg-slate-100"
+            data-loading={pending}
+            onStart={() => setPending(true)}
+            onFinish={() => setPending(false)}
             disabled={pending}
         >
             {pending ? (

routes/web.php

@@ -7,12 +7,13 @@
 use Inertia\Inertia;
 use Laravel\Fortify\Features;
 
-Route::get('/', function () {
-    return Inertia::render('welcome', [
-        'canRegister' => Features::enabled(Features::registration()),
-        'puppies' => PuppyResource::collection(Puppy::get()->load(['user', 'likedBy'])),
-    ]);
-})->name('home');
+Route::get('/', [PuppyController::class, 'index'])->name('home');
+// Route::get('/', function () {
+//     return Inertia::render('welcome', [
+//         'canRegister' => Features::enabled(Features::registration()),
+//         'puppies' => PuppyResource::collection(Puppy::get()->load(['user', 'likedBy'])),
+//     ]);
+// })->name('home');
 
 Route::middleware(['auth', 'verified'])->group(function () {