From 2bbd74d41803e25432ecd9b3f690aa088b87686a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 5 Jul 2025 00:40:50 +1000
Subject: [PATCH] feat(ui): restore canvas busy spinner

---
 .../features/controlLayers/components/CanvasBusySpinner.tsx  | 5 +++--
 .../web/src/features/ui/layouts/CanvasWorkspacePanel.tsx     | 2 ++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasBusySpinner.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasBusySpinner.tsx
index 1ac4ee5c8b..e67aff300a 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasBusySpinner.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasBusySpinner.tsx
@@ -1,3 +1,4 @@
+import type { SpinnerProps } from '@invoke-ai/ui-library';
 import { Spinner } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
@@ -5,7 +6,7 @@ import { useAllEntityAdapters } from 'features/controlLayers/contexts/EntityAdap
 import { computed } from 'nanostores';
 import { memo, useMemo } from 'react';
 
-export const CanvasBusySpinner = memo(() => {
+export const CanvasBusySpinner = memo((props: SpinnerProps) => {
   const canvasManager = useCanvasManager();
   const allEntityAdapters = useAllEntityAdapters();
   const $isPendingRectCalculation = useMemo(
@@ -21,7 +22,7 @@ export const CanvasBusySpinner = memo(() => {
   const isCompositing = useStore(canvasManager.compositor.$isBusy);
 
   if (isRasterizing || isCompositing || isPendingRectCalculation) {
-    return <Spinner opacity={0.3} />;
+    return <Spinner opacity={0.3} {...props} />;
   }
   return null;
 });
diff --git a/invokeai/frontend/web/src/features/ui/layouts/CanvasWorkspacePanel.tsx b/invokeai/frontend/web/src/features/ui/layouts/CanvasWorkspacePanel.tsx
index 33c47a7b71..e9e4d2d0bf 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/CanvasWorkspacePanel.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/CanvasWorkspacePanel.tsx
@@ -3,6 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { CanvasAlertsInvocationProgress } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress';
 import { CanvasAlertsPreserveMask } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsPreserveMask';
 import { CanvasAlertsSelectedEntityStatus } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsSelectedEntityStatus';
+import { CanvasBusySpinner } from 'features/controlLayers/components/CanvasBusySpinner';
 import { CanvasContextMenuGlobalMenuItems } from 'features/controlLayers/components/CanvasContextMenu/CanvasContextMenuGlobalMenuItems';
 import { CanvasContextMenuSelectedEntityMenuItems } from 'features/controlLayers/components/CanvasContextMenu/CanvasContextMenuSelectedEntityMenuItems';
 import { CanvasDropArea } from 'features/controlLayers/components/CanvasDropArea';
@@ -95,6 +96,7 @@ export const CanvasWorkspacePanel = memo(() => {
                   <MenuContent />
                 </Menu>
               </Flex>
+              <CanvasBusySpinner position="absolute" insetInlineEnd={2} bottom={2} />
             </CanvasManagerProviderGate>
           </Flex>
         )}