feat: Make Invoke Button also the progress bar

invokeai/frontend/web/src/app/components/App.tsx

@@ -1,27 +1,26 @@
-import ImageUploader from 'common/components/ImageUploader';
-import SiteHeader from 'features/system/components/SiteHeader';
-import ProgressBar from 'features/system/components/ProgressBar';
-import InvokeTabs from 'features/ui/components/InvokeTabs';
-import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton';
-import FloatingParametersPanelButtons from 'features/ui/components/FloatingParametersPanelButtons';
 import { Box, Flex, Grid, Portal } from '@chakra-ui/react';
-import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants';
+import { useLogger } from 'app/logging/useLogger';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { PartialAppConfig } from 'app/types/invokeai';
+import ImageUploader from 'common/components/ImageUploader';
+import Loading from 'common/components/Loading/Loading';
 import GalleryDrawer from 'features/gallery/components/GalleryPanel';
 import Lightbox from 'features/lightbox/components/Lightbox';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import SiteHeader from 'features/system/components/SiteHeader';
-import { memo, ReactNode, useCallback, useEffect, useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import Loading from 'common/components/Loading/Loading';
-import { useIsApplicationReady } from 'features/system/hooks/useIsApplicationReady';
-import { PartialAppConfig } from 'app/types/invokeai';
-import { configChanged } from 'features/system/store/configSlice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
-import { useLogger } from 'app/logging/useLogger';
+import { useIsApplicationReady } from 'features/system/hooks/useIsApplicationReady';
-import ParametersDrawer from 'features/ui/components/ParametersDrawer';
+import { configChanged } from 'features/system/store/configSlice';
 import { languageSelector } from 'features/system/store/systemSelectors';
+import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton';
+import FloatingParametersPanelButtons from 'features/ui/components/FloatingParametersPanelButtons';
+import InvokeTabs from 'features/ui/components/InvokeTabs';
+import ParametersDrawer from 'features/ui/components/ParametersDrawer';
+import { AnimatePresence, motion } from 'framer-motion';
 import i18n from 'i18n';
-import Toaster from './Toaster';
+import { ReactNode, memo, useCallback, useEffect, useState } from 'react';
+import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants';
 import GlobalHotkeys from './GlobalHotkeys';
+import Toaster from './Toaster';
 
 const DEFAULT_CONFIG = {};
 
@@ -76,7 +75,6 @@ const App = ({
       <Grid w="100vw" h="100vh" position="relative" overflow="hidden">
         {isLightboxEnabled && <Lightbox />}
         <ImageUploader>
-          <ProgressBar />
           <Grid
             gap={4}
             p={4}

invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx

@@ -7,12 +7,12 @@ import IAIIconButton, {
   IAIIconButtonProps,
 } from 'common/components/IAIIconButton';
 import { clampSymmetrySteps } from 'features/parameters/store/generationSlice';
+import ProgressBar from 'features/system/components/ProgressBar';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { FaPlay } from 'react-icons/fa';
-import ProgressBar from 'features/system/components/ProgressBar';
 
 interface InvokeButton
   extends Omit<IAIButtonProps | IAIIconButtonProps, 'aria-label'> {
@@ -59,6 +59,7 @@ export default function InvokeButton(props: InvokeButton) {
             tooltipProps={{ placement: 'bottom' }}
             colorScheme="accent"
             id="invoke-button"
+            zIndex={2}
             {...rest}
           />
         ) : (
@@ -72,6 +73,7 @@ export default function InvokeButton(props: InvokeButton) {
             colorScheme="accent"
             id="invoke-button"
             fontWeight={700}
+            zIndex={2}
             {...rest}
           >
             Invoke
@@ -84,7 +86,10 @@ export default function InvokeButton(props: InvokeButton) {
               bottom: '0',
               left: '0',
               right: '0',
+              height: '100%',
               zIndex: 1,
+              borderRadius: 4,
+              overflow: 'clip',
             }}
           >
             <ProgressBar />

invokeai/frontend/web/src/features/system/components/ProgressBar.tsx

@@ -5,7 +5,6 @@ import { SystemState } from 'features/system/store/systemSlice';
 import { isEqual } from 'lodash-es';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PROGRESS_BAR_THICKNESS } from 'theme/util/constants';
 import { systemSelector } from '../store/systemSelectors';
 
 const progressBarSelector = createSelector(
@@ -35,7 +34,7 @@ const ProgressBar = () => {
       value={value}
       aria-label={t('accessibility.invokeProgressBar')}
       isIndeterminate={isProcessing && !currentStatusHasSteps}
-      height={PROGRESS_BAR_THICKNESS}
+      height="full"
     />
   );
 };