From d277e0ba0e5d87500457538b4b0f1363e267f071 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 24 Feb 2025 11:08:00 +0100
Subject: [PATCH] fix: Prevent flicker during paginated workflow navigation
 (#13348)

---
 .../src/components/layouts/ResourcesListLayout.vue        | 5 ++++-
 packages/editor-ui/src/views/WorkflowsView.vue            | 8 +++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
index db811c61e9..edf00b32ec 100644
--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -551,7 +551,7 @@ const loadPaginationFromQueryString = async () => {
 
 				<slot name="preamble" />
 
-				<div v-if="resourcesRefreshing" class="resource-list-loading">
+				<div v-if="resourcesRefreshing" class="resource-list-loading resource-list-loading-instant">
 					<n8n-loading :rows="rowsPerPage" :shrink-last="false" />
 				</div>
 				<div
@@ -736,6 +736,9 @@ const loadPaginationFromQueryString = async () => {
 		}
 	}
 }
+.resource-list-loading-instant {
+	animation: 0.01s linear 0s forwards changeVisibility;
+}
 
 @keyframes changeVisibility {
 	from {
diff --git a/packages/editor-ui/src/views/WorkflowsView.vue b/packages/editor-ui/src/views/WorkflowsView.vue
index e67099f78a..a71732ef90 100644
--- a/packages/editor-ui/src/views/WorkflowsView.vue
+++ b/packages/editor-ui/src/views/WorkflowsView.vue
@@ -40,6 +40,7 @@ import ProjectHeader from '@/components/Projects/ProjectHeader.vue';
 import { getEasyAiWorkflowJson } from '@/utils/easyAiWorkflowUtils';
 import { useDebounce } from '@/composables/useDebounce';
 import { createEventBus } from 'n8n-design-system/utils';
+import { debounce } from 'lodash-es';
 
 interface Filters extends BaseFilters {
 	status: string | boolean;
@@ -237,7 +238,11 @@ const setPageSize = async (size: number) => {
 };
 
 const fetchWorkflows = async () => {
-	loading.value = true;
+	// We debounce here so that fast enough fetches don't trigger
+	// the placeholder graphics for a few milliseconds, which would cause a flicker
+	const delayedLoading = debounce(() => {
+		loading.value = true;
+	}, 300);
 	const routeProjectId = route.params?.projectId as string | undefined;
 	const homeProjectFilter = filters.value.homeProject || undefined;
 
@@ -252,6 +257,7 @@ const fetchWorkflows = async () => {
 			tags: filters.value.tags.map((tagId) => tagsStore.tagsById[tagId]?.name),
 		},
 	);
+	delayedLoading.cancel();
 	workflows.value = fetchedWorkflows;
 	loading.value = false;
 	return fetchedWorkflows;