Adding a pending indicator to solution actions button.

ReCodEx · Jul 23, 2023 · b7319de · b7319de
1 parent 621830b
commit b7319de
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/src/components/Solutions/SolutionActions/ActionDropdown.js b/src/components/Solutions/SolutionActions/ActionDropdown.js
@@ -9,11 +9,12 @@ import Icon, { CloseIcon, EditIcon, LoadingIcon, SuccessIcon } from '../../icons
 const ActionDropdown = ({ actions, placement = 'bottom', id, captionAsTooltip }) => {
   const [confirmAction, setConfirmAction] = useState(null);
   const target = useRef(null);
+  const anyPending = actions.some(a => a.pending);
 
   return (
     <Dropdown as="span">
-      <Dropdown.Toggle variant="warning" size="xs" ref={target}>
-        <EditIcon gapRight={!captionAsTooltip} />
+      <Dropdown.Toggle variant="warning" size="xs" ref={target} className={anyPending ? 'half-opaque' : ''}>
+        {anyPending ? <LoadingIcon gapRight={!captionAsTooltip} /> : <EditIcon gapRight={!captionAsTooltip} />}
         {!captionAsTooltip && <FormattedMessage id="generic.update" defaultMessage="Update" />}
       </Dropdown.Toggle>