From 7847eddec3d7b803b14cab822caac56319dbd21e Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Thu, 14 May 2020 15:50:59 -0700
Subject: [PATCH] less aggressive flash when color/species loads in

---
 src/app/SpeciesColorPicker.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/app/SpeciesColorPicker.js b/src/app/SpeciesColorPicker.js
index 8a8d84c..d174ede 100644
--- a/src/app/SpeciesColorPicker.js
+++ b/src/app/SpeciesColorPicker.js
@@ -61,6 +61,14 @@ function SpeciesColorPicker({
       _hover={{
         borderColor: "green.400",
       }}
+      _disabled={{
+        // Visually the disabled state is the same as the normal state, but
+        // with a wait cursor. We don't expect this to take long, and the flash
+        // of content is rough! (The caret still flashes, but that's small and
+        // harder to style in Chakra.)
+        opacity: 1,
+        cursor: "wait",
+      }}
       isInvalid={valids && !pairIsValid(valids, speciesId, colorId)}
       errorBorderColor="red.300"
       {...props}