fix: Make search bar chart loading state more obvious

.changeset/popular-zoos-applaud.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": minor
+---
+
+fix: improve the visibility of the search bar chart loading state

packages/api/tsconfig.json

@@ -3,20 +3,12 @@
   "compilerOptions": {
     "baseUrl": "./src",
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     },
     "rootDir": ".",
     "outDir": "build",
     "moduleResolution": "Node16"
   },
-  "include": [
-    "src",
-    "migrations",
-    "scripts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}
+  "include": ["src", "migrations", "scripts"],
+  "exclude": ["node_modules"]
+}

packages/app/src/DBSearchPage.tsx

@@ -824,10 +824,35 @@ function DBSearchPage() {
     setQueryErrors,
   ]);
 
-  const debouncedSubmit = useDebouncedCallback(onSubmit, 1000);
+  // Filter loading state management for live tail mode
+  // This allows showing loading animations when applying filters during live tail,
+  // without kicking the user out of live tail mode (which would show "Resume Live Tail" button)
+  const [isFiltering, setIsFiltering] = useState(false);
+  const filteringTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Clean up timeout on unmount to prevent memory leaks
+  useEffect(() => {
+    return () => {
+      if (filteringTimeoutRef.current) {
+        clearTimeout(filteringTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const debouncedSubmit = useDebouncedCallback(() => {
+    onSubmit();
+    // Clear filtering state after the submit completes to restore normal live tail behavior
+    if (filteringTimeoutRef.current) {
+      clearTimeout(filteringTimeoutRef.current);
+    }
+    filteringTimeoutRef.current = setTimeout(() => setIsFiltering(false), 1500);
+  }, 1000);
+
   const handleSetFilters = useCallback(
     (filters: Filter[]) => {
       setValue('filters', filters);
+      // Set filtering state to show loading animations even during live tail mode
+      setIsFiltering(true);
       debouncedSubmit();
     },
     [debouncedSubmit, setValue],
@@ -1566,6 +1591,8 @@ function DBSearchPage() {
                           showDisplaySwitcher={false}
                           queryKeyPrefix={QUERY_KEY_PREFIX}
                           onTimeRangeSelect={handleTimeRangeSelect}
+                          // Pass false when filtering to show loading animations during live tail
+                          isLive={isLive && !isFiltering}
                         />
                       </Box>
                     )}
@@ -1677,6 +1704,8 @@ function DBSearchPage() {
                             showDisplaySwitcher={false}
                             queryKeyPrefix={QUERY_KEY_PREFIX}
                             onTimeRangeSelect={handleTimeRangeSelect}
+                            // Pass false when filtering to show loading animations during live tail
+                            isLive={isLive && !isFiltering}
                           />
                         </Box>
                       )}