fix: loading state to show loader only if it takes more than 250ms #7268
Conversation
dosubot
bot
added
the
size:M
📝 WalkthroughWalkthroughReplaces the direct Skeleton rendering and Changes
Possibly related PRs✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (2)
💤 Files with no reviewable changes (1)
🧰 Additional context used📓 Path-based instructions (9)src/**/*.vue📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{vue,ts}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{composables,components}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/*.{vue,ts,tsx}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{components,composables}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
**/*.vue📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx,js,jsx,vue,json}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (13)📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-12-09T20:22:23.581ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-12-09T20:22:23.581ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-12-09T20:22:23.581ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-12-09T20:22:23.581ZApplied to files:
📚 Learning: 2025-12-09T03:49:52.828ZApplied to files:
📚 Learning: 2025-12-09T21:40:12.361ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
🔇 Additional comments (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/10/2025, 04:33:24 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results❌ Some tests failed ⏰ Completed at: 12/10/2025, 04:48:46 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.22 MB (baseline 3.22 MB) • ⚪ 0 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 990 kB (baseline 989 kB) • 🔴 +276 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 178 kB (baseline 178 kB) • ⚪ 0 BReusable component library chunks
Status: 6 added / 6 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 3.18 kB (baseline 3.18 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.81 MB (baseline 3.81 MB) • ⚪ 0 BBundles that do not match a named category
Status: 17 added / 17 removed |
simula-r
force-pushed
the
fix/vue-nodes-image-cache
branch
from
e574858 to
18209a8
Compare
simula-r
changed the title
christian-byrne
added
needs-backport
…7268) ## Summary To prevent the flash of "loading..." and "calculating dimensions" when loading cached images only set loading set if longer than 250ms ## Changes - **What**: ImagePreview.vue - **Breaking**: <!-- Any breaking changes (if none, remove this line) --> - **Dependencies**: <!-- New dependencies (if none, remove this line) --> ## Review Focus <!-- Critical design decisions or edge cases that need attention --> <!-- If this PR fixes an issue, uncomment and update the line below --> <!-- Fixes #ISSUE_NUMBER --> ## Screenshots (if applicable) The retrigger loading is because i have throttled 4g slow in the demo. So cache takes time. Normally this doesn't happen. https://github.com/user-attachments/assets/335ca7e4-4ce1-43dd-b7d0-9ee88e187069 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7268-fix-loading-state-to-show-loader-only-if-it-takes-more-than-150ms-2c46d73d365081a6b311f78ba3e1cffd) by [Unito](https://www.unito.io)
github-actions
bot
removed
the
needs-backport
…es more than 250ms (#7503) Backport of #7268 to `core/1.34` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7503-backport-core-1-34-fix-loading-state-to-show-loader-only-if-it-takes-more-than-250ms-2ca6d73d365081a791e8f38454c74c28) by [Unito](https://www.unito.io) Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com>
## Summary Applies appropriate logic from below PRs (which affected image outputs/previews) to video previews - #7268: don't port the 250ms logic for videos, as it is not as relevant - videos typically take longer than 250ms and most browsers have a built-in loading state that will be displayed between component mount and video onloaded that we don't want to flash. Use the native video loaded event instead - #7252: apply to videos 1-for-1 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7558-feat-improve-vue-node-video-preview-loading-and-a11y-2cb6d73d365081eab4dcfeb1e62c553b) by [Unito](https://www.unito.io)
## Summary Applies appropriate logic from below PRs (which affected image outputs/previews) to video previews - #7268: don't port the 250ms logic for videos, as it is not as relevant - videos typically take longer than 250ms and most browsers have a built-in loading state that will be displayed between component mount and video onloaded that we don't want to flash. Use the native video loaded event instead - #7252: apply to videos 1-for-1 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7558-feat-improve-vue-node-video-preview-loading-and-a11y-2cb6d73d365081eab4dcfeb1e62c553b) by [Unito](https://www.unito.io)
## Summary Applies appropriate logic from below PRs (which affected image outputs/previews) to video previews - #7268: don't port the 250ms logic for videos, as it is not as relevant - videos typically take longer than 250ms and most browsers have a built-in loading state that will be displayed between component mount and video onloaded that we don't want to flash. Use the native video loaded event instead - #7252: apply to videos 1-for-1 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7558-feat-improve-vue-node-video-preview-loading-and-a11y-2cb6d73d365081eab4dcfeb1e62c553b) by [Unito](https://www.unito.io)
Summary
To prevent the flash of "loading..." and "calculating dimensions" when loading cached images only set loading set if longer than 250ms
Changes
Review Focus
Screenshots (if applicable)
The retrigger loading is because i have throttled 4g slow in the demo. So cache takes time. Normally this doesn't happen.
chrome_4PVybTGcrm.mp4
┆Issue is synchronized with this Notion page by Unito