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/app/src/DBSearchPage.tsx

@@ -849,10 +849,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],
@@ -1625,6 +1650,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>
  )}
@@ -1702,6 +1729,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>
  )}