fix: Prevent flicker during paginated workflow navigation #13348
Conversation
n8n-assistant
bot
added
n8n team
Codecov ReportAll modified and coverable lines are covered by tests ✅ 📢 Thoughts on this report? Let us know! |
| @@ -238,7 +239,9 @@ const setPageSize = async (size: number) => { | |||
| }; | |||
|
|
|||
| const fetchWorkflows = async () => { | |||
| loading.value = true; | |||
| const markLoading = debounce(() => { | |||
There was a problem hiding this comment.
Is this still needed when css animation is disabled?
There was a problem hiding this comment.
Yes, otherwise we flash the placeholder for 0.1 seconds. It serves the same purpose as the animation, really. Just showing the old page for 0.3 seconds before moving to placeholders (if the new data isn't there yet)
|
|
n8n
|
||||||||||||||||||||||||||||
| Project |
n8n
|
| Branch Review |
ADO-3232
|
| Run status |
|
| Run duration | 04m 38s |
| Commit |
|
| Committer | Charlie Kolb |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
2
|
Pending
|
5
|
Skipped
|
0
|
Passing
|
437
|
| View all changes introduced in this branch ↗︎ | |
|
|
3 similar comments
|
|
|
|
|
|
|
Investigating various flaky e2e tests failing here:
|
|
✅ All Cypress E2E specs passed |
|
Got released with |
Summary
This fixes the perceived flicker when switching pages between workflows.
With artificial delay 1s to simulate a large payload:
1secDelay.mov
Without artificial delay:
noDelay.mov
Related Linear tickets, Github issues, and Community forum posts
https://linear.app/n8n/issue/ADO-3232/bug-loading-state-with-workflow-pagination-is-very-annoying
Review / Merge checklist
release/backport(if the PR is an urgent fix that needs to be backported)