From ec0fcbbf4b274750ed2ec769328376331b68c851 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 18 Oct 2021 15:00:46 +0100
Subject: [PATCH] Annotations: Improve tag search performance (#40567)

---
 .../core/components/TagFilter/TagFilter.tsx   | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/public/app/core/components/TagFilter/TagFilter.tsx b/public/app/core/components/TagFilter/TagFilter.tsx
index cf0e35d1b9a..3780b8da72c 100644
--- a/public/app/core/components/TagFilter/TagFilter.tsx
+++ b/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,