From 38969e8658bf1c064851995fc83490ed4fc66290 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Fri, 22 Jan 2021 14:27:23 -0800
Subject: [PATCH] Use loading state while loading /api/validPetPoses

Oops, we were getting errors when people tried to change the species/color picker before the valid pose data was ready!

This was only happening on the homepage and item page, because on the wardrobe page we wait for the valids to load before showing the picker at all (`showPlaceholders` is false).

To fix this, we add the valid poses loading state to our existing `isLoading` state on the selects, which disables the element and adds a loading spinner cursor. This prevents interactions we're not ready for!
---
 src/app/components/SpeciesColorPicker.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app/components/SpeciesColorPicker.js b/src/app/components/SpeciesColorPicker.js
index f65cdfa..1fe3f2d 100644
--- a/src/app/components/SpeciesColorPicker.js
+++ b/src/app/components/SpeciesColorPicker.js
@@ -148,7 +148,9 @@ function SpeciesColorPicker({
       <SpeciesColorSelect
         aria-label="Pet color"
         value={colorId}
-        isLoading={allColors.length === 0}
+        // We also wait for the valid pairs before enabling, so users can't
+        // trigger change events we're not ready for.
+        isLoading={allColors.length === 0 || loadingValids}
         isDisabled={isDisabled}
         onChange={onChangeColor}
         size={size}
@@ -179,7 +181,9 @@ function SpeciesColorPicker({
       <SpeciesColorSelect
         aria-label="Pet species"
         value={speciesId}
-        isLoading={allSpecies.length === 0}
+        // We also wait for the valid pairs before enabling, so users can't
+        // trigger change events we're not ready for.
+        isLoading={allSpecies.length === 0 || loadingValids}
         isDisabled={isDisabled}
         onChange={onChangeSpecies}
         size={size}