From f7bd85d7f424fd5dd65c1df70fb6e28f59b4e350 Mon Sep 17 00:00:00 2001 From: Galen Kistler <109082771+gtk-grafana@users.noreply.github.com> Date: Thu, 15 Dec 2022 14:15:57 -0600 Subject: [PATCH] Prometheus: Updating editor value on Monaco's onDidChangeContent performance issues (#60191) debounce slow function that is running on each keystroke --- .../monaco-query-field/MonacoQueryField.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx index 13878664886..29adc1f3504 100644 --- a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx +++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx @@ -1,4 +1,5 @@ import { css } from '@emotion/css'; +import { debounce } from 'lodash'; import { promLanguageDefinition } from 'monaco-promql'; import React, { useRef, useEffect } from 'react'; import { useLatest } from 'react-use'; @@ -215,8 +216,16 @@ const MonacoQueryField = (props: Props) => { // If you clicked into another field and haven't un-blurred the active field, // then the query that is run will be stale, as the reference is only updated // with the value of the last blurred input. + // This can run quite slowly, so we're debouncing this which should accomplish two things + // 1. Should prevent this function from blocking the current call stack by pushing into the web API callback queue + // 2. Should prevent a bunch of duplicates of this function being called as the user is typing + const updateCurrentEditorValue = debounce(() => { + const editorValue = editor.getValue(); + onChangeRef.current(editorValue); + }, 300); + editor.getModel()?.onDidChangeContent(() => { - onChangeRef.current(editor.getValue()); + updateCurrentEditorValue(); }); // handle: shift + enter