mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-11 08:20:53 +00:00
fix: remove transition delay from FeedbackSection progress bar (#12059)
*PR Created by the Glary-Bot Agent* --- ## Summary The horizontal progress bar in `FeedbackSection.vue` lagged behind the carousel scroll position because the bar's width was driven reactively by `useScroll`, but the `transition-all duration-200` utility animated each width change over 200ms. As scroll continuously emits new target widths, the bar visibly trailed the scroll position. Removing the transition makes the bar track scroll synchronously. ## Verification - Reproduced the lag locally on `/customers`. - Verified post-fix that `bar.style.width` updates in the same frame as `scrollLeft` changes (samples at scrollLeft 0 / 944 / 1600 → width 0% / 59% / 100%, with `transitionDuration: 0s`). - `pnpm exec eslint`, `pnpm exec oxfmt --check`, `pnpm nx typecheck website`, and `pnpm test:unit` all pass. ## Notes No regression test added — the customers section components have no existing unit/E2E coverage in this repo, and standing up a new test harness for a one-line CSS fix would be disproportionate. Worth following up on broader carousel coverage as a separate task. ## Screenshot After fix, scrolled to second slide — progress bar tracks scroll position synchronously. ## Screenshots  ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-12059-fix-remove-transition-delay-from-FeedbackSection-progress-bar-3596d73d36508107bc80dc38ea7ab79e) by [Unito](https://www.unito.io) Co-authored-by: Glary-Bot <glary-bot@users.noreply.github.com>
This commit is contained in:
@@ -75,7 +75,7 @@ const progressPercent = computed(() => `${progress.value * 100}%`)
|
||||
<!-- Progress bar -->
|
||||
<div class="h-1 flex-1 rounded-full bg-white/20">
|
||||
<div
|
||||
class="bg-primary-comfy-yellow h-full rounded-full transition-all duration-200"
|
||||
class="bg-primary-comfy-yellow h-full rounded-full"
|
||||
:style="{ width: progressPercent }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user