From f366640d46d197c7967bfa1c3389dacb033bb118 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Fri, 28 Feb 2025 10:33:15 +1000 Subject: [PATCH] fix(ui): invoke button not showing loading indicator on canvas tab On the Canvas tab, when we made the network request to enqueue a batch, we were immediately resetting the request. This effectively disabled RTKQ's tracking of the request - including the loading state. As a result, when you click the Invoke button on the Canvas tab, it didn't show a spinner, and it was not clear that anything was happening. The solution is simple - just await the enqueue request before resetting the tracking, same as we already did on the workflows and upscaling tabs. I also added some extra logging messages for enqueuing, so we get the same JS console logs for each tab on success or failure. --- .../listeners/enqueueRequestedLinear.ts | 17 ++++++++--------- .../listeners/enqueueRequestedNodes.ts | 8 ++++++++ .../listeners/enqueueRequestedUpscale.ts | 8 ++++++++ 3 files changed, 24 insertions(+), 9 deletions(-) diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts index 66997785690..53301f6a9d4 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts @@ -3,6 +3,7 @@ import { enqueueRequested } from 'app/store/actions'; import type { AppStartListening } from 'app/store/middleware/listenerMiddleware'; import { extractMessageFromAssertionError } from 'common/util/extractMessageFromAssertionError'; import { withResult, withResultAsync } from 'common/util/result'; +import { parseify } from 'common/util/serialize'; import { $canvasManager } from 'features/controlLayers/store/ephemeral'; import { prepareLinearUIBatch } from 'features/nodes/util/graph/buildLinearBatchConfig'; import { buildFLUXGraph } from 'features/nodes/util/graph/generation/buildFLUXGraph'; @@ -13,7 +14,6 @@ import { toast } from 'features/toast/toast'; import { serializeError } from 'serialize-error'; import { enqueueMutationFixedCacheKeyOptions, queueApi } from 'services/api/endpoints/queue'; import { assert, AssertionError } from 'tsafe'; -import type { JsonObject } from 'type-fest'; const log = logger('generation'); @@ -80,16 +80,15 @@ export const addEnqueueRequestedLinear = (startAppListening: AppStartListening) const req = dispatch( queueApi.endpoints.enqueueBatch.initiate(prepareBatchResult.value, enqueueMutationFixedCacheKeyOptions) ); - req.reset(); - const enqueueResult = await withResultAsync(() => req.unwrap()); - - if (enqueueResult.isErr()) { - log.error({ error: serializeError(enqueueResult.error) }, 'Failed to enqueue batch'); - return; + try { + await req.unwrap(); + log.debug(parseify({ batchConfig: prepareBatchResult.value }), 'Enqueued batch'); + } catch (error) { + log.error({ error: serializeError(error) }, 'Failed to enqueue batch'); + } finally { + req.reset(); } - - log.debug({ batchConfig: prepareBatchResult.value } as JsonObject, 'Enqueued batch'); }, }); }; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedNodes.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedNodes.ts index 6a14028ad91..838019c428b 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedNodes.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedNodes.ts @@ -1,5 +1,7 @@ +import { logger } from 'app/logging/logger'; import { enqueueRequested } from 'app/store/actions'; import type { AppStartListening } from 'app/store/middleware/listenerMiddleware'; +import { parseify } from 'common/util/serialize'; import { $templates } from 'features/nodes/store/nodesSlice'; import { selectNodesSlice } from 'features/nodes/store/selectors'; import { isBatchNode, isInvocationNode } from 'features/nodes/types/invocation'; @@ -7,9 +9,12 @@ import { buildNodesGraph } from 'features/nodes/util/graph/buildNodesGraph'; import { resolveBatchValue } from 'features/nodes/util/node/resolveBatchValue'; import { buildWorkflowWithValidation } from 'features/nodes/util/workflow/buildWorkflow'; import { groupBy } from 'lodash-es'; +import { serializeError } from 'serialize-error'; import { enqueueMutationFixedCacheKeyOptions, queueApi } from 'services/api/endpoints/queue'; import type { Batch, BatchConfig } from 'services/api/types'; +const log = logger('generation'); + export const addEnqueueRequestedNodes = (startAppListening: AppStartListening) => { startAppListening({ predicate: (action): action is ReturnType => @@ -101,6 +106,9 @@ export const addEnqueueRequestedNodes = (startAppListening: AppStartListening) = const req = dispatch(queueApi.endpoints.enqueueBatch.initiate(batchConfig, enqueueMutationFixedCacheKeyOptions)); try { await req.unwrap(); + log.debug(parseify({ batchConfig }), 'Enqueued batch'); + } catch (error) { + log.error({ error: serializeError(error) }, 'Failed to enqueue batch'); } finally { req.reset(); } diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedUpscale.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedUpscale.ts index 022fc99716f..62e70263158 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedUpscale.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedUpscale.ts @@ -1,9 +1,14 @@ +import { logger } from 'app/logging/logger'; import { enqueueRequested } from 'app/store/actions'; import type { AppStartListening } from 'app/store/middleware/listenerMiddleware'; +import { parseify } from 'common/util/serialize'; import { prepareLinearUIBatch } from 'features/nodes/util/graph/buildLinearBatchConfig'; import { buildMultidiffusionUpscaleGraph } from 'features/nodes/util/graph/buildMultidiffusionUpscaleGraph'; +import { serializeError } from 'serialize-error'; import { enqueueMutationFixedCacheKeyOptions, queueApi } from 'services/api/endpoints/queue'; +const log = logger('generation'); + export const addEnqueueRequestedUpscale = (startAppListening: AppStartListening) => { startAppListening({ predicate: (action): action is ReturnType => @@ -19,6 +24,9 @@ export const addEnqueueRequestedUpscale = (startAppListening: AppStartListening) const req = dispatch(queueApi.endpoints.enqueueBatch.initiate(batchConfig, enqueueMutationFixedCacheKeyOptions)); try { await req.unwrap(); + log.debug(parseify({ batchConfig }), 'Enqueued batch'); + } catch (error) { + log.error({ error: serializeError(error) }, 'Failed to enqueue batch'); } finally { req.reset(); }