fix: debounce value

Author: knudtty

packages/app/src/HDXMultiSeriesTimeChart.tsx

@@ -367,8 +367,10 @@ export const MemoChart = memo(function MemoChart({
 
   const [isHovered, setIsHovered] = useState(false);
 
-  const ChartComponent =
-    displayType === DisplayType.StackedBar ? BarChart : AreaChart; // LineChart;
+  const ChartComponent = useMemo(
+    () => (displayType === DisplayType.StackedBar ? BarChart : AreaChart), // LineChart;
+    [displayType],
+  );
 
   const lines = useMemo(() => {
     const hasSelection = selectedSeriesNames && selectedSeriesNames.size > 0;

packages/app/src/hooks/useAutoCompleteOptions.tsx

@@ -10,7 +10,7 @@ import {
   useCompleteKeyValues,
   useMultipleAllFields,
 } from '@/hooks/useMetadata';
-import { toArray } from '@/utils';
+import { toArray, useDebounce } from '@/utils';
 
 export type TokenInfo = {
   /** The full token at the cursor position */
@@ -46,7 +46,7 @@ export interface ILanguageFormatter {
 
 export function useAutoCompleteOptions(
   formatter: ILanguageFormatter,
-  value: string,
+  _value: string,
   {
     tableConnection,
     additionalSuggestions,
@@ -59,6 +59,7 @@ export function useAutoCompleteOptions(
     inputRef?: React.RefObject<HTMLTextAreaElement | null>;
   },
 ) {
+  const value = useDebounce(_value, 300);
   const tcs = useMemo(() => toArray(tableConnection), [tableConnection]);
 
   const effectiveDateRange: [Date, Date] = useMemo(