From 8d22a314a650a451543ebd17fb89bda0eea33b1a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 28 Jul 2025 19:29:34 +1000
Subject: [PATCH] docs(ui): add some comments for race condition handling

---
 .../web/src/features/gallery/components/ImageViewer/context.tsx | 2 ++
 invokeai/frontend/web/src/services/events/setEventListeners.tsx | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/context.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/context.tsx
index 590906cc66..9cc723f7e8 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/context.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/context.tsx
@@ -29,6 +29,8 @@ export const ImageViewerContextProvider = memo((props: PropsWithChildren) => {
   const $progressEvent = useState(() => atom<S['InvocationProgressEvent'] | null>(null))[0];
   const $progressImage = useState(() => atom<ProgressImageType | null>(null))[0];
   const $hasProgressImage = useState(() => computed($progressImage, (progressImage) => progressImage !== null))[0];
+  // We can have race conditions where we receive a progress event for a queue item that has already finished. Easiest
+  // way to handle this is to keep track of finished queue items in a cache and ignore progress events for those.
   const [finishedQueueItemIds] = useState(() => new LRUCache<number, boolean>({ max: 200 }));
 
   useEffect(() => {
diff --git a/invokeai/frontend/web/src/services/events/setEventListeners.tsx b/invokeai/frontend/web/src/services/events/setEventListeners.tsx
index 6e97fe57dd..b02bd69e88 100644
--- a/invokeai/frontend/web/src/services/events/setEventListeners.tsx
+++ b/invokeai/frontend/web/src/services/events/setEventListeners.tsx
@@ -46,6 +46,8 @@ const selectModelInstalls = modelsApi.endpoints.listModelInstalls.select();
 export const setEventListeners = ({ socket, store, setIsConnected }: SetEventListenersArg) => {
   const { dispatch, getState } = store;
 
+  // We can have race conditions where we receive a progress event for a queue item that has already finished. Easiest
+  // way to handle this is to keep track of finished queue items in a cache and ignore progress events for those.
   const finishedQueueItemIds = new LRUCache<number, boolean>({ max: 100 });
 
   socket.on('connect', () => {