fix: prevent persistent loading state when cycling batches with identical URLs#8999
Merged
christian-byrne merged 3 commits intomainfrom Mar 6, 2026
Merged
fix: prevent persistent loading state when cycling batches with identical URLs#8999christian-byrne merged 3 commits intomainfrom
christian-byrne merged 3 commits intomainfrom
Conversation
…ical URLs In setCurrentIndex(), only start the loader when the target URL differs from the current URL. When batch images/videos share the same URL (common on Cloud), the browser doesn't fire a new load event since src didn't change, leaving the skeleton loader visible permanently. Also fix VideoPreview navigation dots using bg-white instead of semantic bg-base-foreground tokens. Amp-Thread-ID: https://ampcode.com/threads/T-019c796c-8895-74a2-b0d8-c9052a8772f3
christian-byrne
added
the
verified bug
dosubot
bot
added
the
size:L
🎭 Playwright: ✅ 551 passed, 0 failed · 4 flaky📊 Browser Reports
|
🎨 Storybook: ✅ Built — View Storybook |
Contributor
|
No actionable comments were generated in the recent review. 🎉 📝 WalkthroughWalkthroughUpdates add tests and adjust ImagePreview and VideoPreview to avoid resetting loader/dimensions when cycling to the same URL; loader is triggered only on actual URL changes. VideoPreview navigation dot classes are updated to use base-foreground tokens. New tests cover identical vs different URL cycling. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Comment |
📦 Bundle: 4.53 MB gzip 🔴 +33 BDetailsSummary
Category Glance App Entry Points — 18.2 kB (baseline 18.2 kB) • ⚪ 0 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 935 kB (baseline 935 kB) • 🔴 +252 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 72.4 kB (baseline 72.4 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Panels & Settings — 436 kB (baseline 436 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
User & Accounts — 16.1 kB (baseline 16.1 kB) • ⚪ 0 BAuthentication, profile, and account management bundles
Editors & Dialogs — 76.6 kB (baseline 76.6 kB) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
UI Components — 50.8 kB (baseline 50.8 kB) • ⚪ 0 BReusable component library chunks
Data & Services — 2.75 MB (baseline 2.75 MB) • ⚪ 0 BStores, services, APIs, and repositories
Utilities & Hooks — 57.3 kB (baseline 57.3 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Vendor & Third-Party — 8.88 MB (baseline 8.88 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 7.92 MB (baseline 7.92 MB) • ⚪ 0 BBundles that do not match a named category
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/renderer/extensions/vueNodes/VideoPreview.vue (1)
250-256: Usecn()to compose navigation-dot classes (avoid array return).
The repo standard requirescn()for class merging and forbids array-based class bindings.♻️ Suggested refactor
-const getNavigationDotClass = (index: number) => { - return [ - 'w-2 h-2 rounded-full transition-all duration-200 border-0 cursor-pointer', - index === currentIndex.value - ? 'bg-base-foreground' - : 'bg-base-foreground/50 hover:bg-base-foreground/80' - ] -} +const getNavigationDotClass = (index: number) => + cn( + 'w-2 h-2 rounded-full transition-all duration-200 border-0 cursor-pointer', + index === currentIndex.value + ? 'bg-base-foreground' + : 'bg-base-foreground/50 hover:bg-base-foreground/80' + )As per coding guidelines: Use
cn()utility from '@/utils/tailwindUtil' to merge class names; never use:class="[]"syntax.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/renderer/extensions/vueNodes/VideoPreview.vue` around lines 250 - 256, getNavigationDotClass currently returns an array of class strings which violates the repo standard; instead import and use the cn() utility from '@/utils/tailwindUtil' and return a single string composed by cn(). Specifically, update getNavigationDotClass(index: number) to call cn('w-2 h-2 rounded-full transition-all duration-200 border-0 cursor-pointer', index === currentIndex.value ? 'bg-base-foreground' : 'bg-base-foreground/50 hover:bg-base-foreground/80') so the class merging uses cn and no array is returned.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/renderer/extensions/vueNodes/VideoPreview.test.ts`:
- Around line 35-105: The module-level mutable wrapperRegistry should be removed
and mountVideoPreview should be converted to a properly typed function
declaration using Partial<ComponentProps<typeof VideoPreview>> for its props;
stop using a global Set to track wrappers and instead unmount the wrapper
returned by mountVideoPreview inside each test's finally block (and remove the
centralized afterEach cleanup). Update all tests to call mountVideoPreview(...)
and ensure they call wrapper.unmount() in finally to guarantee per-test teardown
while keeping references to VideoPreview and mountVideoPreview to locate the
changes.
---
Nitpick comments:
In `@src/renderer/extensions/vueNodes/VideoPreview.vue`:
- Around line 250-256: getNavigationDotClass currently returns an array of class
strings which violates the repo standard; instead import and use the cn()
utility from '@/utils/tailwindUtil' and return a single string composed by cn().
Specifically, update getNavigationDotClass(index: number) to call cn('w-2 h-2
rounded-full transition-all duration-200 border-0 cursor-pointer', index ===
currentIndex.value ? 'bg-base-foreground' : 'bg-base-foreground/50
hover:bg-base-foreground/80') so the class merging uses cn and no array is
returned.
⚡ Performance Report
Raw data{
"timestamp": "2026-03-06T01:10:05.599Z",
"gitSha": "675e3886fd8d0dcd00ad6c7144e2db6b47034440",
"branch": "fix/cycling-batches-vue-nodes",
"measurements": [
{
"name": "canvas-idle",
"durationMs": 2027.388000000002,
"styleRecalcs": 124,
"styleRecalcDurationMs": 20.023,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 377.232,
"heapDeltaBytes": -2791500
},
{
"name": "canvas-idle",
"durationMs": 2028.1960000000083,
"styleRecalcs": 124,
"styleRecalcDurationMs": 19.211999999999996,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 384.633,
"heapDeltaBytes": -2989748
},
{
"name": "canvas-idle",
"durationMs": 2014.1499999999724,
"styleRecalcs": 121,
"styleRecalcDurationMs": 16.793,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 369.339,
"heapDeltaBytes": -3001268
},
{
"name": "canvas-mouse-sweep",
"durationMs": 2079.958000000005,
"styleRecalcs": 185,
"styleRecalcDurationMs": 53.556,
"layouts": 12,
"layoutDurationMs": 3.76,
"taskDurationMs": 1065.79,
"heapDeltaBytes": -1544456
},
{
"name": "canvas-mouse-sweep",
"durationMs": 1791.9110000000273,
"styleRecalcs": 162,
"styleRecalcDurationMs": 42.486,
"layouts": 12,
"layoutDurationMs": 3.28,
"taskDurationMs": 765.331,
"heapDeltaBytes": -3344968
},
{
"name": "canvas-mouse-sweep",
"durationMs": 1999.3259999999964,
"styleRecalcs": 179,
"styleRecalcDurationMs": 51.004,
"layouts": 12,
"layoutDurationMs": 2.9729999999999994,
"taskDurationMs": 976.4370000000001,
"heapDeltaBytes": -2493624
},
{
"name": "dom-widget-clipping",
"durationMs": 618.5169999999971,
"styleRecalcs": 45,
"styleRecalcDurationMs": 13.523999999999997,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 395.81,
"heapDeltaBytes": 7607024
},
{
"name": "dom-widget-clipping",
"durationMs": 549.3860000000268,
"styleRecalcs": 40,
"styleRecalcDurationMs": 12.307,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 331.97600000000006,
"heapDeltaBytes": 6836016
},
{
"name": "dom-widget-clipping",
"durationMs": 582.6179999999681,
"styleRecalcs": 44,
"styleRecalcDurationMs": 12.868,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 352.538,
"heapDeltaBytes": 8012128
},
{
"name": "subgraph-dom-widget-clipping",
"durationMs": 664.0629999999987,
"styleRecalcs": 77,
"styleRecalcDurationMs": 18.435,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 453.09400000000005,
"heapDeltaBytes": -7794328
},
{
"name": "subgraph-dom-widget-clipping",
"durationMs": 607.135000000028,
"styleRecalcs": 76,
"styleRecalcDurationMs": 18.133000000000003,
"layouts": 1,
"layoutDurationMs": 0.22400000000000003,
"taskDurationMs": 420.20599999999996,
"heapDeltaBytes": -8695108
},
{
"name": "subgraph-dom-widget-clipping",
"durationMs": 601.6690000000153,
"styleRecalcs": 73,
"styleRecalcDurationMs": 15.419999999999998,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 420.359,
"heapDeltaBytes": -9239124
},
{
"name": "subgraph-idle",
"durationMs": 2008.3359999999857,
"styleRecalcs": 123,
"styleRecalcDurationMs": 22.788,
"layouts": 1,
"layoutDurationMs": 0.272,
"taskDurationMs": 385.5690000000001,
"heapDeltaBytes": -1770848
},
{
"name": "subgraph-idle",
"durationMs": 2015.6769999999824,
"styleRecalcs": 124,
"styleRecalcDurationMs": 23.333,
"layouts": 1,
"layoutDurationMs": 0.21199999999999994,
"taskDurationMs": 386.465,
"heapDeltaBytes": -2747292
},
{
"name": "subgraph-idle",
"durationMs": 2015.442999999948,
"styleRecalcs": 124,
"styleRecalcDurationMs": 23.221,
"layouts": 1,
"layoutDurationMs": 0.17699999999999996,
"taskDurationMs": 385.21099999999996,
"heapDeltaBytes": -2163132
},
{
"name": "subgraph-mouse-sweep",
"durationMs": 1745.7349999999963,
"styleRecalcs": 157,
"styleRecalcDurationMs": 50.202000000000005,
"layouts": 16,
"layoutDurationMs": 3.811,
"taskDurationMs": 717.197,
"heapDeltaBytes": -5539308
},
{
"name": "subgraph-mouse-sweep",
"durationMs": 1688.0429999999933,
"styleRecalcs": 154,
"styleRecalcDurationMs": 43.53999999999999,
"layouts": 16,
"layoutDurationMs": 4.0280000000000005,
"taskDurationMs": 696.793,
"heapDeltaBytes": -5178020
},
{
"name": "subgraph-mouse-sweep",
"durationMs": 1993.1960000000117,
"styleRecalcs": 172,
"styleRecalcDurationMs": 54.095000000000006,
"layouts": 16,
"layoutDurationMs": 4.246,
"taskDurationMs": 957.143,
"heapDeltaBytes": -3848628
}
]
} |
christian-byrne
added
core/1.40
github-actions bot
pushed a commit
that referenced
this pull request
Mar 8, 2026
…ical URLs (#8999) ## Summary Fix persistent loading/skeleton state when cycling through batch images or videos that share the same URL (common on Cloud). ## Changes - **What**: In `setCurrentIndex()` for both `ImagePreview.vue` and `VideoPreview.vue`, only start the loader when the target URL differs from the current URL. When batch items share the same URL, the browser doesn't fire a new `load`/`loadeddata` event since `src` didn't change, so the loader was never dismissed. - Also fixes `VideoPreview.vue` navigation dots using hardcoded `bg-white` instead of semantic `bg-base-foreground` tokens. ## Review Focus This bug has regressed 3+ times (PRs #6521, #7094, #8366). The regression tests specifically target the root cause — cycling through identical URLs — to prevent future reintroduction. Fixes https://www.notion.so/comfy-org/Bug-Cycling-through-image-batches-results-in-persistent-loading-state-on-Cloud-30c6d73d3650816e9738d5dbea52c47d ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8999-fix-prevent-persistent-loading-state-when-cycling-batches-with-identical-URLs-30d6d73d36508180831edbaf8ad8ad48) by [Unito](https://www.unito.io) --------- Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com>
Member
|
@christian-byrne Successfully backported to #9570 |
github-actions
bot
removed
the
needs-backport
christian-byrne
added a commit
that referenced
this pull request
Mar 8, 2026
…ng batches with identical URLs (#9570) Backport of #8999 to `core/1.40` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9570-backport-core-1-40-fix-prevent-persistent-loading-state-when-cycling-batches-with-iden-31d6d73d3650818d9136cfc82e73d89f) by [Unito](https://www.unito.io) Co-authored-by: Christian Byrne <cbyrne@comfy.org> Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fix persistent loading/skeleton state when cycling through batch images or videos that share the same URL (common on Cloud).
Changes
setCurrentIndex()for bothImagePreview.vueandVideoPreview.vue, only start the loader when the target URL differs from the current URL. When batch items share the same URL, the browser doesn't fire a newload/loadeddataevent sincesrcdidn't change, so the loader was never dismissed.VideoPreview.vuenavigation dots using hardcodedbg-whiteinstead of semanticbg-base-foregroundtokens.Review Focus
This bug has regressed 3+ times (PRs #6521, #7094, #8366). The regression tests specifically target the root cause — cycling through identical URLs — to prevent future reintroduction.
Fixes https://www.notion.so/comfy-org/Bug-Cycling-through-image-batches-results-in-persistent-loading-state-on-Cloud-30c6d73d3650816e9738d5dbea52c47d
┆Issue is synchronized with this Notion page by Unito