From c4588098ca6ad0edd8262aa98bf2a0229350ceaf Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Sat, 6 Jun 2026 10:35:31 +0200
Subject: [PATCH] =?UTF-8?q?fix(01-03):=20defer=20species/breed=20Select=20?=
 =?UTF-8?q?render=20until=20data=20loads=20=E2=80=94=20fixes=20CUID=20show?=
 =?UTF-8?q?ing=20in=20trigger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pet/PetForm.tsx | 147 +++++++++++++++++----------------
 1 file changed, 76 insertions(+), 71 deletions(-)

diff --git a/src/components/pet/PetForm.tsx b/src/components/pet/PetForm.tsx
index 5afef81..e86d1e5 100644
--- a/src/components/pet/PetForm.tsx
+++ b/src/components/pet/PetForm.tsx
@@ -19,6 +19,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
 
 /**
  * PetForm — reusable create/edit form for pet profiles.
@@ -98,12 +99,12 @@ export function PetForm({
     initialValues?.speciesId ?? ""
   );
 
-  const { data: speciesList = [] } = useQuery({
+  const { data: speciesList = [], isLoading: speciesLoading } = useQuery({
     ...trpc.pets.listSpecies.queryOptions(),
     staleTime: Infinity,
   });
 
-  const { data: breedList = [] } = useQuery({
+  const { data: breedList = [], isLoading: breedsLoading } = useQuery({
     ...trpc.pets.listBreeds.queryOptions(
       { speciesId: selectedSpeciesId || "__none__" },
     ),
@@ -201,40 +202,42 @@ export function PetForm({
         )}
       </div>
 
-      {/* Species selector */}
+      {/* Species selector — defer render until list loaded so SelectValue resolves names */}
       <div className="flex flex-col gap-1.5">
         <Label htmlFor="species">Species</Label>
-        <Controller
-          name="speciesId"
-          control={control}
-          render={({ field }) => (
-            <Select
-              value={field.value || null}
-              onValueChange={(val) => {
-                const newVal = val ?? "";
-                field.onChange(newVal);
-                setSelectedSpeciesId(newVal);
-                // Reset breed when species changes (species and breed are coupled)
-                setValue("breedId", null);
-              }}
-            >
-              <SelectTrigger
-                id="species"
-                className="w-full"
-                aria-invalid={!!errors.speciesId}
+        {speciesLoading ? (
+          <Skeleton className="h-9 w-full" />
+        ) : (
+          <Controller
+            name="speciesId"
+            control={control}
+            render={({ field }) => (
+              <Select
+                value={field.value || undefined}
+                onValueChange={(val) => {
+                  field.onChange(val);
+                  setSelectedSpeciesId(val);
+                  setValue("breedId", null);
+                }}
               >
-                <SelectValue placeholder="Select species" />
-              </SelectTrigger>
-              <SelectContent>
-                {speciesList.map((species) => (
-                  <SelectItem key={species.id} value={species.id}>
-                    {species.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          )}
-        />
+                <SelectTrigger
+                  id="species"
+                  className="w-full"
+                  aria-invalid={!!errors.speciesId}
+                >
+                  <SelectValue placeholder="Select species" />
+                </SelectTrigger>
+                <SelectContent>
+                  {speciesList.map((species) => (
+                    <SelectItem key={species.id} value={species.id}>
+                      {species.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          />
+        )}
         {errors.speciesId && (
           <p className="text-xs text-destructive">
             {errors.speciesId.message}
@@ -242,49 +245,51 @@ export function PetForm({
         )}
       </div>
 
-      {/* Breed selector */}
+      {/* Breed selector — defer render until list loaded so SelectValue resolves names */}
       <div className="flex flex-col gap-1.5">
         <Label htmlFor="breed">Breed</Label>
-        <Controller
-          name="breedId"
-          control={control}
-          render={({ field }) => (
-            <Select
-              value={field.value ?? null}
-              onValueChange={(val) => {
-                field.onChange(val ?? null);
-              }}
-              disabled={!selectedSpeciesId}
-            >
-              <SelectTrigger
-                id="breed"
-                className="w-full"
+        {selectedSpeciesId && breedsLoading ? (
+          <Skeleton className="h-9 w-full" />
+        ) : (
+          <Controller
+            name="breedId"
+            control={control}
+            render={({ field }) => (
+              <Select
+                value={field.value ?? undefined}
+                onValueChange={(val) => field.onChange(val ?? null)}
                 disabled={!selectedSpeciesId}
               >
-                <SelectValue
-                  placeholder={
-                    selectedSpeciesId
-                      ? "Select breed (optional)"
-                      : "Select a species first"
-                  }
-                />
-              </SelectTrigger>
-              <SelectContent>
-                {breedList.length === 0 ? (
-                  <SelectItem value="__empty__" disabled>
-                    No breeds found for this species.
-                  </SelectItem>
-                ) : (
-                  breedList.map((breed) => (
-                    <SelectItem key={breed.id} value={breed.id}>
-                      {breed.name}
+                <SelectTrigger
+                  id="breed"
+                  className="w-full"
+                  disabled={!selectedSpeciesId}
+                >
+                  <SelectValue
+                    placeholder={
+                      selectedSpeciesId
+                        ? "Select breed (optional)"
+                        : "Select a species first"
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {breedList.length === 0 ? (
+                    <SelectItem value="__empty__" disabled>
+                      No breeds found for this species.
                     </SelectItem>
-                  ))
-                )}
-              </SelectContent>
-            </Select>
-          )}
-        />
+                  ) : (
+                    breedList.map((breed) => (
+                      <SelectItem key={breed.id} value={breed.id}>
+                        {breed.name}
+                      </SelectItem>
+                    ))
+                  )}
+                </SelectContent>
+              </Select>
+            )}
+          />
+        )}
         {errors.breedId && (
           <p className="text-xs text-destructive">{errors.breedId.message}</p>
         )}