feat(ui): progress toggle button displays spinner when in progress

invokeai/frontend/web/src/features/viewer/components/ViewerToolbar.tsx

@@ -1,4 +1,5 @@
-import { ButtonGroup, Flex, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { ButtonGroup, Flex, IconButton, Menu, MenuButton, MenuList, spinAnimation } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppToaster } from 'app/components/Toaster';
@@ -23,10 +24,11 @@ import { useTranslation } from 'react-i18next';
 import {
   PiArrowsCounterClockwiseBold,
   PiAsteriskBold,
+  PiCircleNotchBold,
   PiDotsThreeOutlineFill,
   PiEyeBold,
   PiFlowArrowBold,
-  PiHourglassHighBold,
+  PiHourglassMediumFill,
   PiInfoBold,
   PiPlantBold,
   PiQuotesBold,
@@ -44,9 +46,14 @@ const selectShouldDisableToolbarButtons = createSelector(
   }
 );
 
+const loadingStyles: SystemStyleObject = {
+  svg: { animation: spinAnimation },
+};
+
 export const ViewerToolbar = memo(() => {
   const dispatch = useAppDispatch();
   const isConnected = useAppSelector((s) => s.system.isConnected);
+  const hasProgress = useAppSelector((s) => s.progress.latestDenoiseProgress !== null);
   const lastSelectedImage = useAppSelector(selectLastSelectedImage);
   const shouldDisableToolbarButtons = useAppSelector(selectShouldDisableToolbarButtons);
   const viewerMode = useAppSelector((s) => s.viewer.viewerMode);
@@ -288,9 +295,10 @@ export const ViewerToolbar = memo(() => {
           <IconButton
             aria-label={`${t('viewer.viewerModeProgress')}`}
             tooltip={`${t('viewer.viewerModeProgress')}`}
-            icon={<PiHourglassHighBold />}
+            icon={hasProgress ? <PiCircleNotchBold /> : <PiHourglassMediumFill />}
             isChecked={viewerMode === 'progress'}
             onClick={handleSelectViewerProgress}
+            sx={hasProgress ? loadingStyles : undefined}
           />
         </ButtonGroup>
       </Flex>