toolbar/buttons: debounce short progress

Don't flash progress for short actions like starting repl and stopping
user program. If the hub becomes disconnected, these actions can take
a long time before failing and in that case, we do want to show the
progress indicator.

src/toolbar/buttons/repl/ReplButton.tsx

@@ -3,6 +3,7 @@
 
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
+import { useDebounce } from 'usehooks-ts';
 import { hubStartRepl } from '../../../hub/actions';
 import { HubRuntimeState } from '../../../hub/reducers';
 import { useSelector } from '../../../reducers';
@@ -22,6 +23,8 @@ const ReplButton: React.VoidFunctionComponent<ReplButtonProps> = ({ id }) => {
         [dispatch, useLegacyDownload],
     );
 
+    const busy = useDebounce(runtime === HubRuntimeState.StartingRepl, 250);
+
     return (
         <ActionButton
             id={id}
@@ -29,7 +32,7 @@ const ReplButton: React.VoidFunctionComponent<ReplButtonProps> = ({ id }) => {
             tooltip={i18n.translate('tooltip')}
             icon={icon}
             enabled={hasRepl && runtime === HubRuntimeState.Idle}
-            showProgress={runtime === HubRuntimeState.StartingRepl}
+            showProgress={busy}
             onAction={action}
         />
     );

src/toolbar/buttons/stop/StopButton.tsx

@@ -3,6 +3,7 @@
 
 import React from 'react';
 import { useDispatch } from 'react-redux';
+import { useDebounce } from 'usehooks-ts';
 import { hubStopUserProgram } from '../../../hub/actions';
 import { HubRuntimeState } from '../../../hub/reducers';
 import { useSelector } from '../../../reducers';
@@ -19,6 +20,8 @@ const StopButton: React.VoidFunctionComponent<StopButtonProps> = ({ id }) => {
     const i18n = useI18n();
     const dispatch = useDispatch();
 
+    const busy = useDebounce(runtime === HubRuntimeState.StoppingUserProgram, 250);
+
     return (
         <ActionButton
             id={id}
@@ -27,7 +30,7 @@ const StopButton: React.VoidFunctionComponent<StopButtonProps> = ({ id }) => {
             tooltip={i18n.translate('tooltip', { key: keyboardShortcut })}
             icon={icon}
             enabled={runtime === HubRuntimeState.Running}
-            showProgress={runtime === HubRuntimeState.StoppingUserProgram}
+            showProgress={busy}
             onAction={() => dispatch(hubStopUserProgram())}
         />
     );