fix(editor): Debounce expression changes (#8629)

This commit is contained in:
Elias Meire 2024-02-14 15:23:11 +01:00 committed by GitHub
parent 68498cb72a
commit 9c7e0266ee
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -62,6 +62,7 @@ import { createExpressionTelemetryPayload } from '@/utils/telemetryUtils';
import type { Segment } from '@/types/expressions'; import type { Segment } from '@/types/expressions';
import type { TargetItem } from '@/Interface'; import type { TargetItem } from '@/Interface';
import type { IDataObject } from 'n8n-workflow'; import type { IDataObject } from 'n8n-workflow';
import { useDebounce } from '@/composables/useDebounce';
type InlineExpressionEditorInputRef = InstanceType<typeof InlineExpressionEditorInput>; type InlineExpressionEditorInputRef = InstanceType<typeof InlineExpressionEditorInput>;
@ -96,6 +97,10 @@ export default defineComponent({
default: () => ({}), default: () => ({}),
}, },
}, },
setup() {
const { callDebounced } = useDebounce();
return { callDebounced };
},
data() { data() {
return { return {
isFocused: false, isFocused: false,
@ -154,7 +159,10 @@ export default defineComponent({
this.$telemetry.track('User closed Expression Editor', telemetryPayload); this.$telemetry.track('User closed Expression Editor', telemetryPayload);
} }
}, },
onChange({ value, segments }: { value: string; segments: Segment[] }) { onChange(value: { value: string; segments: Segment[] }) {
void this.callDebounced(this.onChangeDebounced, { debounceTime: 100, trailing: true }, value);
},
onChangeDebounced({ value, segments }: { value: string; segments: Segment[] }) {
this.segments = segments; this.segments = segments;
if (this.isDragging) return; if (this.isDragging) return;