fix(striker-ui): move loading spinner from Dialog actions to ActionGroup

striker-ui/components/ActionGroup.tsx

@@ -4,6 +4,7 @@ import { v4 as uuidv4 } from 'uuid';
 
 import ContainedButton from './ContainedButton';
 import FlexBox from './FlexBox';
+import Spinner from './Spinner';
 
 const FlexEndBox = styled(FlexBox)({
   justifyContent: 'flex-end',
@@ -11,7 +12,7 @@ const FlexEndBox = styled(FlexBox)({
 });
 
 const ActionGroup: FC<ActionGroupProps> = (props) => {
-  const { actions = [] } = props;
+  const { actions = [], loading } = props;
 
   const elements = useMemo(
     () =>
@@ -23,7 +24,9 @@ const ActionGroup: FC<ActionGroupProps> = (props) => {
     [actions],
   );
 
-  return (
+  return loading ? (
+    <Spinner mt={0} />
+  ) : (
     <FlexEndBox row spacing=".5em">
       {elements}
     </FlexEndBox>

striker-ui/components/Dialog/DialogActionGroup.tsx

@@ -2,7 +2,6 @@ import { FC, useCallback, useContext, useMemo } from 'react';
 
 import ActionGroup from '../ActionGroup';
 import { DialogContext } from './Dialog';
-import Spinner from '../Spinner';
 
 const handleAction: ExtendableEventHandler<ButtonClickEventHandler> = (
   { handlers: { base, origin } },
@@ -78,12 +77,14 @@ const DialogActionGroup: FC<DialogActionGroupProps> = (props) => {
             onClick: proceedHandler,
           },
         ]}
+        loading={loading}
       />
     ),
     [
       cancelChildren,
       cancelHandler,
       cancelProps,
+      loading,
       proceedChildren,
       proceedColour,
       proceedHandler,
@@ -91,12 +92,7 @@ const DialogActionGroup: FC<DialogActionGroupProps> = (props) => {
     ],
   );
 
-  const result = useMemo(
-    () => (loading ? <Spinner mt={0} /> : actions),
-    [actions, loading],
-  );
-
-  return result;
+  return actions;
 };
 
 export default DialogActionGroup;

striker-ui/types/ActionGroup.d.ts

@@ -1,5 +1,6 @@
 type ActionGroupOptionalProps = {
   actions?: ContainedButtonProps[];
+  loading?: boolean;
 };
 
 type ActionGroupProps = ActionGroupOptionalProps;