fix(ui): some progress image jank

This commit is contained in:
psychedelicious
2025-06-26 18:29:35 +10:00
parent 394a14cf61
commit 1c778bd719
4 changed files with 13 additions and 11 deletions

View File

@@ -127,7 +127,7 @@ export const addEnqueueRequestedLinear = (startAppListening: AppStartListening)
prepend,
seedFieldIdentifier,
positivePromptFieldIdentifier,
origin: 'canvas',
origin: tab,
destination,
})
);

View File

@@ -68,15 +68,14 @@ export const CurrentImagePreview = memo(({ imageDTO }: { imageDTO: ImageDTO | nu
return;
}
if (autoSwitch) {
return;
}
// When auto-switch is enabled, we will get a load event as we switch to the new image. This in turn clears the progress image,
// creating the illusion of the progress image turning into the new image.
// But when auto-switch is disabled, we won't get that load event, so we need to clear the progress image manually.
const onQueueItemStatusChanged = () => {
$progressEvent.set(null);
$progressImage.set(null);
const onQueueItemStatusChanged = (data: S['QueueItemStatusChangedEvent']) => {
// When auto-switch is enabled, we will get a load event as we switch to the new image. This in turn clears the progress image,
// creating the illusion of the progress image turning into the new image.
// But when auto-switch is disabled, we won't get that load event, so we need to clear the progress image manually.
if (data.origin === 'canvas' || !autoSwitch) {
$progressEvent.set(null);
$progressImage.set(null);
}
};
socket.on('queue_item_status_changed', onQueueItemStatusChanged);

View File

@@ -33,7 +33,7 @@ export const prepareLinearUIBatch = (arg: {
prepend: boolean;
seedFieldIdentifier?: FieldIdentifier;
positivePromptFieldIdentifier: FieldIdentifier;
origin: 'canvas' | 'workflows' | 'upscaling';
origin: string;
destination: string;
}): EnqueueBatchArg => {
const { state, g, prepend, seedFieldIdentifier, positivePromptFieldIdentifier, origin, destination } = arg;

View File

@@ -12,6 +12,7 @@ import { createContext, memo, useCallback, useContext, useMemo, useState } from
import { LEFT_PANEL_ID, LEFT_PANEL_MIN_SIZE_PX, RIGHT_PANEL_ID, RIGHT_PANEL_MIN_SIZE_PX } from './shared';
type AutoLayoutContextValue = {
tab: TabName;
isActiveTab: boolean;
toggleLeftPanel: () => void;
toggleRightPanel: () => void;
@@ -137,6 +138,7 @@ export const AutoLayoutProvider = (
const value = useMemo<AutoLayoutContextValue>(
() => ({
tab,
isActiveTab,
toggleLeftPanel,
toggleRightPanel,
@@ -150,6 +152,7 @@ export const AutoLayoutProvider = (
_$rightPanelApi: $rightApi,
}),
[
tab,
isActiveTab,
$centerApi,
$leftApi,