Added disabling of dice buttons when dice is loading

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

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>

src/components/dice/DiceTrayOverlay.js

@@ -336,6 +336,7 @@ function DiceTrayOverlay({
         diceTraySize={diceTraySize}
         shareDice={shareDice}
         onShareDiceChange={onShareDiceChage}
+        loading={isLoading}
       />
       {isLoading && (
         <Box

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>