mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: Prevent flicker during paginated workflow navigation (#13348)

Browse source
This commit is contained in:
Charlie Kolb 2025-02-24 11:08:00 +01:00 committed by GitHub
parent 8ff7ba9b82
commit d277e0ba0e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
View file

@ -551,7 +551,7 @@ const loadPaginationFromQueryString = async () => {
<slot name="preamble" /> <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" /> <n8n-loading :rows="rowsPerPage" :shrink-last="false" />
</div> </div>
<div <div
@ -736,6 +736,9 @@ const loadPaginationFromQueryString = async () => {
} }
} }
} }
.resource-list-loading-instant {
animation: 0.01s linear 0s forwards changeVisibility;
}
@keyframes changeVisibility { @keyframes changeVisibility {
from { from {

8
packages/editor-ui/src/views/WorkflowsView.vue
View file

@ -40,6 +40,7 @@ import ProjectHeader from '@/components/Projects/ProjectHeader.vue';
import { getEasyAiWorkflowJson } from '@/utils/easyAiWorkflowUtils'; import { getEasyAiWorkflowJson } from '@/utils/easyAiWorkflowUtils';
import { useDebounce } from '@/composables/useDebounce'; import { useDebounce } from '@/composables/useDebounce';
import { createEventBus } from 'n8n-design-system/utils'; import { createEventBus } from 'n8n-design-system/utils';
import { debounce } from 'lodash-es';
interface Filters extends BaseFilters { interface Filters extends BaseFilters {
status: string | boolean; status: string | boolean;
@ -237,7 +238,11 @@ const setPageSize = async (size: number) => {
}; };
const fetchWorkflows = async () => { 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 routeProjectId = route.params?.projectId as string | undefined;
const homeProjectFilter = filters.value.homeProject || undefined; const homeProjectFilter = filters.value.homeProject || undefined;
@ -252,6 +257,7 @@ const fetchWorkflows = async () => {
tags: filters.value.tags.map((tagId) => tagsStore.tagsById[tagId]?.name), tags: filters.value.tags.map((tagId) => tagsStore.tagsById[tagId]?.name),
}, },
); );
delayedLoading.cancel();
workflows.value = fetchedWorkflows; workflows.value = fetchedWorkflows;
loading.value = false; loading.value = false;
return fetchedWorkflows; return fetchedWorkflows;