processing pending state

Author: simonswiss

app/Http/Controllers/PuppyController.php

@@ -51,6 +51,7 @@ public function like(Request $request, Puppy $puppy)
     // ------------------------------
     public function store(Request $request)
     {
+        sleep(2);
         // Validate the data
         $request->validate([
             'name' => 'required|string|max:255',

resources/js/components/NewPuppyForm.tsx

@@ -1,9 +1,8 @@
 import { useForm } from '@inertiajs/react';
 import { useRef } from 'react';
-import { useFormStatus } from 'react-dom';
 
-export function NewPuppyForm() {
-    const { post, setData, data, errors, reset } = useForm({
+export function NewPuppyForm({ mainRef }: { mainRef?: React.RefObject<HTMLElement | null> }) {
+    const { post, setData, data, errors, reset, processing } = useForm({
         name: '',
         trait: '',
         image: null as File | null,
@@ -22,8 +21,8 @@ export function NewPuppyForm() {
                                 if (fileInputRef.current) {
                                     fileInputRef.current.value = '';
                                 }
-                                if (typeof window !== 'undefined') {
-                                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                                if (mainRef?.current) {
+                                    mainRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
                                 }
                             },
                         });
@@ -68,22 +67,15 @@ export function NewPuppyForm() {
                             {errors.image && <p className="mt-1 text-xs text-red-500">{errors.image}</p>}
                         </fieldset>
                     </div>
-                    <SubmitButton />
+                    <button
+                        className="mt-4 inline-block rounded bg-cyan-300 px-4 py-2 font-medium text-cyan-900 hover:bg-cyan-200 focus:ring-2 focus:ring-cyan-500 focus:outline-none disabled:cursor-not-allowed disabled:bg-slate-200"
+                        type="submit"
+                        disabled={processing}
+                    >
+                        {processing ? `Adding ${data.name}...` : 'Add puppy'}
+                    </button>
                 </form>
             </div>
         </>
     );
 }
-
-function SubmitButton() {
-    const status = useFormStatus();
-    return (
-        <button
-            className="mt-4 inline-block rounded bg-cyan-300 px-4 py-2 font-medium text-cyan-900 hover:bg-cyan-200 focus:ring-2 focus:ring-cyan-500 focus:outline-none disabled:cursor-not-allowed disabled:bg-slate-200"
-            type="submit"
-            disabled={status.pending}
-        >
-            {status.pending ? `Adding ${status?.data?.get('name') || 'puppy'}...` : 'Add puppy'}
-        </button>
-    );
-}

resources/js/pages/puppies/index.tsx

@@ -8,6 +8,7 @@ import { Shortlist } from '@/components/Shortlist';
 
 import { Filters, PaginatedResponse, Puppy, SharedData } from '@/types';
 import { usePage } from '@inertiajs/react';
+import { useRef } from 'react';
 
 export default function App({ puppies, filters }: { puppies: PaginatedResponse<Puppy>; filters: Filters }) {
     return (
@@ -22,15 +23,16 @@ export default function App({ puppies, filters }: { puppies: PaginatedResponse<P
 
 function Main({ paginatedPuppies, filters }: { paginatedPuppies: PaginatedResponse<Puppy>; filters: Filters }) {
     const { auth } = usePage<SharedData>().props;
+    const mainRef = useRef<HTMLElement>(null);
 
     return (
-        <main>
+        <main ref={mainRef} className="scroll-mt-6">
             <div className="mt-24 grid gap-8 sm:grid-cols-2">
                 <Search filters={filters} />
                 {auth.user && <Shortlist puppies={paginatedPuppies.data} />}
             </div>
             <PuppiesList puppies={paginatedPuppies} />
-            {auth.user && <NewPuppyForm />}
+            {auth.user && <NewPuppyForm mainRef={mainRef} />}
         </main>
     );
 }