fix(editor): Prevent action's panel flickering while dragging a node (#…

…10739)
n8n-io · Sep 10, 2024 · efa5573 · efa5573
1 parent 9f3e03d
commit efa5573
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue b/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue
@@ -28,11 +28,13 @@ import ItemsRenderer from '../Renderers/ItemsRenderer.vue';
 import CategorizedItemsRenderer from '../Renderers/CategorizedItemsRenderer.vue';
 import type { IDataObject } from 'n8n-workflow';
 import { useTelemetry } from '@/composables/useTelemetry';
+import { useI18n } from '@/composables/useI18n';
 
 const emit = defineEmits<{
 	nodeTypeSelected: [value: [actionKey: string, nodeName: string] | [nodeName: string]];
 }>();
 const telemetry = useTelemetry();
+const i18n = useI18n();
 
 const { userActivated } = useUsersStore();
 const { popViewStack, updateCurrentViewStack } = useViewStacks();
@@ -238,9 +240,10 @@ onMounted(() => {
 			<template v-if="isTriggerRootView || parsedTriggerActionsBaseline.length !== 0" #triggers>
 				<!-- Triggers Category -->
 				<CategorizedItemsRenderer
+					v-memo="[search]"
 					:elements="parsedTriggerActions"
 					:category="triggerCategoryName"
-					:mouse-over-tooltip="$locale.baseText('nodeCreator.actionsTooltip.triggersStartWorkflow')"
+					:mouse-over-tooltip="i18n.baseText('nodeCreator.actionsTooltip.triggersStartWorkflow')"
 					is-trigger-category
 					:expanded="isTriggerRootView || parsedActionActions.length === 0"
 					@selected="onSelected"
@@ -256,7 +259,7 @@ onMounted(() => {
 						>
 							<span
 								v-html="
-									$locale.baseText('nodeCreator.actionsCallout.noTriggerItems', {
+									i18n.baseText('nodeCreator.actionsCallout.noTriggerItems', {
 										interpolate: { nodeName: subcategory ?? '' },
 									})
 								"
@@ -268,17 +271,18 @@ onMounted(() => {
 						<p
 							:class="$style.resetSearch"
 							@click="resetSearch"
-							v-html="$locale.baseText('nodeCreator.actionsCategory.noMatchingTriggers')"
+							v-html="i18n.baseText('nodeCreator.actionsCategory.noMatchingTriggers')"
 						/>
 					</template>
 				</CategorizedItemsRenderer>
 			</template>
 			<template v-if="!isTriggerRootView || parsedActionActionsBaseline.length !== 0" #actions>
 				<!-- Actions Category -->
 				<CategorizedItemsRenderer
+					v-memo="[search]"
 					:elements="parsedActionActions"
 					:category="actionsCategoryLocales.actions"
-					:mouse-over-tooltip="$locale.baseText('nodeCreator.actionsTooltip.actionsPerformStep')"
+					:mouse-over-tooltip="i18n.baseText('nodeCreator.actionsTooltip.actionsPerformStep')"
 					:expanded="!isTriggerRootView || parsedTriggerActions.length === 0"
 					@selected="onSelected"
 				>
@@ -289,14 +293,14 @@ onMounted(() => {
 						slim
 						data-test-id="actions-panel-activation-callout"
 					>
-						<span v-html="$locale.baseText('nodeCreator.actionsCallout.triggersStartWorkflow')" />
+						<span v-html="i18n.baseText('nodeCreator.actionsCallout.triggersStartWorkflow')" />
 					</n8n-callout>
 					<!-- Empty state -->
 					<template #empty>
 						<n8n-info-tip v-if="!search" theme="info" type="note" :class="$style.actionsEmpty">
 							<span
 								v-html="
-									$locale.baseText('nodeCreator.actionsCallout.noActionItems', {
+									i18n.baseText('nodeCreator.actionsCallout.noActionItems', {
 										interpolate: { nodeName: subcategory ?? '' },
 									})
 								"
@@ -307,7 +311,7 @@ onMounted(() => {
 							:class="$style.resetSearch"
 							data-test-id="actions-panel-no-matching-actions"
 							@click="resetSearch"
-							v-html="$locale.baseText('nodeCreator.actionsCategory.noMatchingActions')"
+							v-html="i18n.baseText('nodeCreator.actionsCategory.noMatchingActions')"
 						/>
 					</template>
 				</CategorizedItemsRenderer>
@@ -317,7 +321,7 @@ onMounted(() => {
 			<span
 				@click.prevent="addHttpNode"
 				v-html="
-					$locale.baseText('nodeCreator.actionsList.apiCall', {
+					i18n.baseText('nodeCreator.actionsList.apiCall', {
 						interpolate: { node: subcategory ?? '' },
 					})
 				"

diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue b/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue
@@ -226,7 +226,12 @@ registerKeyHook('MainViewArrowLeft', {
 <template>
 	<span>
 		<!-- Main Node Items -->
-		<ItemsRenderer :elements="activeViewStack.items" :class="$style.items" @selected="onSelected">
+		<ItemsRenderer
+			v-memo="[activeViewStack.search]"
+			:elements="activeViewStack.items"
+			:class="$style.items"
+			@selected="onSelected"
+		>
 			<template
 				v-if="(activeViewStack.items || []).length === 0 && globalSearchItemsDiff.length === 0"
 				#empty