From 8ae1eaaccc7edc81c264448069206b070249ebbb Mon Sep 17 00:00:00 2001
From: mickr777 <115216705+mickr777@users.noreply.github.com>
Date: Fri, 2 Jun 2023 14:19:02 +1000
Subject: [PATCH] Add Progress bar under invoke Button

Find on some screens the progress bar at top of screen gets cut off
---
 .../parameters/components/ProcessButtons/InvokeButton.tsx     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx
index 7042bc8c41..9efebf7ef2 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx
@@ -12,6 +12,7 @@ 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'> {
@@ -43,7 +44,7 @@ export default function InvokeButton(props: InvokeButton) {
   );
 
   return (
-    <Box style={{ flexGrow: 4 }}>
+    <Box style={{ flexGrow: 4 }} position="relative">
       {iconButton ? (
         <IAIIconButton
           aria-label={t('parameters.invoke')}
@@ -75,6 +76,7 @@ export default function InvokeButton(props: InvokeButton) {
           Invoke
         </IAIButton>
       )}
+      {!isReady && <ProgressBar />}
     </Box>
   );
 }