OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Use loading state while loading /api/validPetPoses

Browse source 
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!
This commit is contained in:
Emi Matchu 2021-01-22 14:27:23 -08:00
parent 88fd4698d0
commit 38969e8658
1 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/app/components/SpeciesColorPicker.js
View file

@ -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}