Annotations: Improve tag search performance (#40567)

public/app/core/components/TagFilter/TagFilter.tsx

@@ -2,6 +2,7 @@
 import React, { FC } from 'react';
 import { css } from '@emotion/css';
 import { components } from 'react-select';
+import debounce from 'debounce-promise';
 import { stylesFactory, useTheme, resetSelectStyles, Icon, AsyncMultiSelect } from '@grafana/ui';
 import { escapeStringForRegex, GrafanaTheme } from '@grafana/data';
 // Components
@@ -47,16 +48,17 @@ export const TagFilter: FC<Props> = ({
   const theme = useTheme();
   const styles = getStyles(theme);
 
-  const onLoadOptions = (query: string) => {
-    return tagOptions().then((options) => {
-      return options.map((option) => ({
-        value: option.term,
-        label: option.term,
-        count: option.count,
-      }));
-    });
+  const onLoadOptions = async (query: string) => {
+    const options = await tagOptions();
+    return options.map((option) => ({
+      value: option.term,
+      label: option.term,
+      count: option.count,
+    }));
   };
 
+  const debouncedLoadOptions = debounce(onLoadOptions, 300);
+
   const onTagChange = (newTags: any[]) => {
     // On remove with 1 item returns null, so we need to make sure it's an empty array in that case
     // https://github.com/JedWatson/react-select/issues/3632
@@ -74,7 +76,7 @@ export const TagFilter: FC<Props> = ({
     getOptionValue: (i: any) => i.value,
     inputId,
     isMulti: true,
-    loadOptions: onLoadOptions,
+    loadOptions: debouncedLoadOptions,
     loadingMessage: 'Loading...',
     noOptionsMessage: 'No tags found',
     onChange: onTagChange,