From 1140247a3e380c8791ccf19bd8af58fbf173d779 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Tue, 11 Aug 2020 18:56:56 +1000
Subject: [PATCH] Added disabling of dice buttons when dice is loading

---
 src/components/dice/DiceButton.js       | 3 ++-
 src/components/dice/DiceButtons.js      | 6 +++++-
 src/components/dice/DiceTrayOverlay.js  | 1 +
 src/components/dice/SelectDiceButton.js | 3 ++-
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/dice/DiceButton.js b/src/components/dice/DiceButton.js
index 833d5c5..45c9d74 100644
--- a/src/components/dice/DiceButton.js
+++ b/src/components/dice/DiceButton.js
@@ -3,13 +3,14 @@ import { IconButton } from "theme-ui";
 
 import Count from "./DiceButtonCount";
 
-function DiceButton({ title, children, count, onClick }) {
+function DiceButton({ title, children, count, onClick, disabled }) {
   return (
     <IconButton
       title={title}
       aria-label={title}
       onClick={onClick}
       sx={{ position: "relative" }}
+      disabled={disabled}
     >
       {children}
       {count && <Count>{count}</Count>}
diff --git a/src/components/dice/DiceButtons.js b/src/components/dice/DiceButtons.js
index dc89e1c..b44ffd1 100644
--- a/src/components/dice/DiceButtons.js
+++ b/src/components/dice/DiceButtons.js
@@ -29,6 +29,7 @@ function DiceButtons({
   onDiceTraySizeChange,
   shareDice,
   onShareDiceChange,
+  loading,
 }) {
   const [currentDiceStyle, setCurrentDiceStyle] = useSetting("dice.style");
   const [currentDice, setCurrentDice] = useState(
@@ -134,10 +135,11 @@ function DiceButtons({
           <SelectDiceButton
             onDiceChange={handleDiceChange}
             currentDice={currentDice}
+            disabled={loading}
           />
           <Divider />
           {buttons.map((button) => (
-            <DiceButton {...button} />
+            <DiceButton disabled={loading} {...button} />
           ))}
           <Divider />
           <IconButton
@@ -160,6 +162,7 @@ function DiceButtons({
                 diceTraySize === "single" ? "double" : "single"
               )
             }
+            disabled={loading}
           >
             <ExpandMoreDiceTrayIcon />
           </IconButton>
@@ -168,6 +171,7 @@ function DiceButtons({
             aria-label={shareDice ? "Hide Dice Rolls" : "Share Dice Rolls"}
             title={shareDice ? "Hide Dice Rolls" : "Share Dice Rolls"}
             onClick={() => onShareDiceChange(!shareDice)}
+            disabled={loading}
           >
             {shareDice ? <ShareDiceOnIcon /> : <ShareDiceOffIcon />}
           </IconButton>
diff --git a/src/components/dice/DiceTrayOverlay.js b/src/components/dice/DiceTrayOverlay.js
index fb409f0..a2e925d 100644
--- a/src/components/dice/DiceTrayOverlay.js
+++ b/src/components/dice/DiceTrayOverlay.js
@@ -336,6 +336,7 @@ function DiceTrayOverlay({
         diceTraySize={diceTraySize}
         shareDice={shareDice}
         onShareDiceChange={onShareDiceChage}
+        loading={isLoading}
       />
       {isLoading && (
         <Box
diff --git a/src/components/dice/SelectDiceButton.js b/src/components/dice/SelectDiceButton.js
index 58e7f24..f5c9fda 100644
--- a/src/components/dice/SelectDiceButton.js
+++ b/src/components/dice/SelectDiceButton.js
@@ -4,7 +4,7 @@ import { IconButton } from "theme-ui";
 import SelectDiceIcon from "../../icons/SelectDiceIcon";
 import SelectDiceModal from "../../modals/SelectDiceModal";
 
-function SelectDiceButton({ onDiceChange, currentDice }) {
+function SelectDiceButton({ onDiceChange, currentDice, disabled }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   function openModal() {
@@ -25,6 +25,7 @@ function SelectDiceButton({ onDiceChange, currentDice }) {
         aria-label="Select Dice Style"
         title="Select Dice Style"
         onClick={openModal}
+        disabled={disabled}
       >
         <SelectDiceIcon />
       </IconButton>