From dad14373cd888b4430613478eb6171e1b66007fa Mon Sep 17 00:00:00 2001
From: Aaron Knudtson <87577305+knudtty@users.noreply.github.com>
Date: Tue, 10 Nov 2026 13:42:19 -0500
Subject: [PATCH 1/3] fix: loading states unified across the app

---
 .changeset/chart-loading-spinner.md              | 10 ++++++++++
 packages/app/src/components/DBBarChart.tsx       | 16 +++++++---------
 packages/app/src/components/DBHistogramChart.tsx | 16 +++++++---------
 packages/app/src/components/DBListBarChart.tsx   | 16 +++++++---------
 packages/app/src/components/DBNumberChart.tsx    | 16 +++++++---------
 packages/app/src/components/DBPieChart.tsx       | 16 +++++++---------
 packages/app/src/components/DBTableChart.tsx     | 16 +++++++---------
 packages/app/src/components/DBTimeChart.tsx      |  8 ++++++--
 .../ServiceDashboardSlowestEventsTile.tsx        |  3 ++-
 .../src/components/__tests__/DBBarChart.test.tsx | 10 ++++++----
 .../__tests__/DBHistogramChart.test.tsx          |  7 +++----
 .../components/__tests__/DBListBarChart.test.tsx |  7 +++----
 .../components/__tests__/DBNumberChart.test.tsx  |  7 +++----
 .../src/components/__tests__/DBPieChart.test.tsx |  7 +++----
 .../components/__tests__/DBTableChart.test.tsx   |  9 ++++-----
 packages/app/src/theme/mantineTheme.ts           |  6 ++++++
 16 files changed, 88 insertions(+), 82 deletions(-)
 create mode 100644 .changeset/chart-loading-spinner.md

diff --git a/.changeset/chart-loading-spinner.md b/.changeset/chart-loading-spinner.md
new file mode 100644
index 000000000..d652952a5
--- /dev/null
+++ b/.changeset/chart-loading-spinner.md
@@ -0,0 +1,10 @@
+---
+'@hyperdx/app': patch
+---
+
+fix: show a neutral spinner while charts load
+
+Chart tiles now show a spinner with "Loading Chart Data..." while a query is in
+flight, including when the previous result was empty. Before, they kept showing
+"No data found within time range." until the new query finished. Loaders now
+default to a neutral gray instead of yellow.
diff --git a/packages/app/src/components/DBBarChart.tsx b/packages/app/src/components/DBBarChart.tsx
index 6bdfbf008..148a07c9e 100644
--- a/packages/app/src/components/DBBarChart.tsx
+++ b/packages/app/src/components/DBBarChart.tsx
@@ -1,5 +1,4 @@
 import { memo } from 'react';
-import cx from 'classnames';
 import {
   Bar,
   BarChart,
@@ -9,7 +8,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import { Flex } from '@mantine/core';
+import { Flex, Loader } from '@mantine/core';
 
 import type { NumberFormat } from '@/types';
 import { useContentFontSize } from '@/useUserPreferences';
@@ -86,6 +85,7 @@ export const DBBarChart = (props: CategoricalChartProps) => {
     <ChartContainer title={props.title} toolbarItems={toolbarItems}>
       {isLoading && !data ? (
         <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
+          <Loader size="xs" mr="xs" />
           Loading Chart Data...
         </div>
       ) : isError && error ? (
@@ -96,13 +96,11 @@ export const DBBarChart = (props: CategoricalChartProps) => {
           variant={props.errorVariant}
         />
       ) : data?.data.length === 0 ? (
-        <div
-          className={cx(
-            'd-flex h-100 w-100 align-items-center justify-content-center text-muted',
-            { 'effect-pulse': isPlaceholderData },
-          )}
-        >
-          No data found within time range.
+        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
+          {isPlaceholderData && <Loader size="xs" mr="xs" />}
+          {isPlaceholderData
+            ? 'Loading Chart Data...'
+            : 'No data found within time range.'}
         </div>
       ) : (
         <Flex
diff --git a/packages/app/src/components/DBHistogramChart.tsx b/packages/app/src/components/DBHistogramChart.tsx
index 0e8ffa0e7..cb007715d 100644
--- a/packages/app/src/components/DBHistogramChart.tsx
+++ b/packages/app/src/components/DBHistogramChart.tsx
@@ -1,5 +1,4 @@
 import { memo, useEffect, useMemo, useState } from 'react';
-import cx from 'classnames';
 import { omit } from 'lodash';
 import { useHotkeys } from 'react-hotkeys-hook';
 import {
@@ -11,7 +10,7 @@ import {
   YAxis,
 } from 'recharts';
 import { BuilderChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
-import { Text } from '@mantine/core';
+import { Loader, Text } from '@mantine/core';
 
 import { buildMVDateRangeIndicator, INTEGER_NUMBER_FORMAT } from '@/ChartUtils';
 import { useQueriedChartConfig } from '@/hooks/useChartConfig';
@@ -298,18 +297,17 @@ export default function DBHistogramChart({
     <ChartContainer title={title} toolbarItems={toolbarItemsMemo}>
       {isLoading && !data ? (
         <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
+          <Loader size="xs" mr="xs" />
           Loading Chart Data...
         </div>
       ) : isError ? (
         <ChartErrorState error={error} variant={errorVariant} />
       ) : data?.data.length === 0 ? (
-        <div
-          className={cx(
-            'd-flex h-100 w-100 align-items-center justify-content-center text-muted',
-            { 'effect-pulse': isPlaceholderData },
-          )}
-        >
-          No data found within time range.
+        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
+          {isPlaceholderData && <Loader size="xs" mr="xs" />}
+          {isPlaceholderData
+            ? 'Loading Chart Data...'
+            : 'No data found within time range.'}
         </div>
       ) : (
         <HistogramChart
diff --git a/packages/app/src/components/DBListBarChart.tsx b/packages/app/src/components/DBListBarChart.tsx
index ef463ff1d..459a4cc3f 100644
--- a/packages/app/src/components/DBListBarChart.tsx
+++ b/packages/app/src/components/DBListBarChart.tsx
@@ -1,10 +1,9 @@
 import { useMemo } from 'react';
 import Link from 'next/link';
-import cx from 'classnames';
 import { omit } from 'lodash';
 import { BuilderChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
 import type { FloatingPosition } from '@mantine/core';
-import { Box, Flex, HoverCard, Text } from '@mantine/core';
+import { Box, Flex, HoverCard, Loader, Text } from '@mantine/core';
 
 import { buildMVDateRangeIndicator } from '@/ChartUtils';
 import { useQueriedChartConfig } from '@/hooks/useChartConfig';
@@ -279,18 +278,17 @@ export default function DBListBarChart({
     >
       {isLoading && !data ? (
         <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
+          <Loader size="xs" mr="xs" />
           Loading Chart Data...
         </div>
       ) : isError ? (
         <ChartErrorState error={error} variant={errorVariant} />
       ) : data?.data.length === 0 ? (
-        <div
-          className={cx(
-            'd-flex h-100 w-100 align-items-center justify-content-center text-muted',
-            { 'effect-pulse': isPlaceholderData },
-          )}
-        >
-          No data found within time range.
+        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
+          {isPlaceholderData && <Loader size="xs" mr="xs" />}
+          {isPlaceholderData
+            ? 'Loading Chart Data...'
+            : 'No data found within time range.'}
         </div>
       ) : (
         <div className={isPlaceholderData ? 'effect-pulse' : undefined}>
diff --git a/packages/app/src/components/DBNumberChart.tsx b/packages/app/src/components/DBNumberChart.tsx
index 6bbf580e3..e4d3195a7 100644
--- a/packages/app/src/components/DBNumberChart.tsx
+++ b/packages/app/src/components/DBNumberChart.tsx
@@ -1,5 +1,4 @@
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
-import cx from 'classnames';
 import { ErrorBoundary } from 'react-error-boundary';
 import {
   filterColumnMetaByType,
@@ -14,7 +13,7 @@ import {
   ChartConfigWithDateRange,
   resolveChartPaletteToken,
 } from '@hyperdx/common-utils/dist/types';
-import { Flex, Text } from '@mantine/core';
+import { Flex, Loader, Text } from '@mantine/core';
 
 import {
   buildMVDateRangeIndicator,
@@ -383,6 +382,7 @@ export default function DBNumberChart({
     <ChartContainer title={title} toolbarItems={toolbarItemsMemo}>
       {isLoading && !data ? (
         <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
+          <Loader size="xs" mr="xs" />
           Loading Chart Data...
         </div>
       ) : isError ? (
@@ -390,13 +390,11 @@ export default function DBNumberChart({
       ) : resultError ? (
         <ChartErrorState error={resultError} variant={errorVariant} />
       ) : data?.data.length === 0 ? (
-        <div
-          className={cx(
-            'd-flex h-100 w-100 align-items-center justify-content-center text-muted',
-            { 'effect-pulse': isPlaceholderData },
-          )}
-        >
-          No data found within time range.
+        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
+          {isPlaceholderData && <Loader size="xs" mr="xs" />}
+          {isPlaceholderData
+            ? 'Loading Chart Data...'
+            : 'No data found within time range.'}
         </div>
       ) : (
         <div
diff --git a/packages/app/src/components/DBPieChart.tsx b/packages/app/src/components/DBPieChart.tsx
index 7409bd069..cbd28e476 100644
--- a/packages/app/src/components/DBPieChart.tsx
+++ b/packages/app/src/components/DBPieChart.tsx
@@ -1,7 +1,6 @@
 import { memo } from 'react';
-import cx from 'classnames';
 import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
-import { Box, Flex, ScrollArea, Text } from '@mantine/core';
+import { Box, Flex, Loader, ScrollArea, Text } from '@mantine/core';
 
 import type { NumberFormat } from '@/types';
 import { formatNumber, truncateMiddle } from '@/utils';
@@ -106,6 +105,7 @@ export const DBPieChart = (props: CategoricalChartProps) => {
     <ChartContainer title={title} toolbarItems={toolbarItems}>
       {isLoading && !data ? (
         <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
+          <Loader size="xs" mr="xs" />
           Loading Chart Data...
         </div>
       ) : isError && error ? (
@@ -113,13 +113,11 @@ export const DBPieChart = (props: CategoricalChartProps) => {
       ) : responseFormatError ? (
         <ChartErrorState error={responseFormatError} variant={errorVariant} />
       ) : data?.data.length === 0 ? (
-        <div
-          className={cx(
-            'd-flex h-100 w-100 align-items-center justify-content-center text-muted',
-            { 'effect-pulse': isPlaceholderData },
-          )}
-        >
-          No data found within time range.
+        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
+          {isPlaceholderData && <Loader size="xs" mr="xs" />}
+          {isPlaceholderData
+            ? 'Loading Chart Data...'
+            : 'No data found within time range.'}
         </div>
       ) : (
         <Flex
diff --git a/packages/app/src/components/DBTableChart.tsx b/packages/app/src/components/DBTableChart.tsx
index d0fb12206..f11a295f2 100644
--- a/packages/app/src/components/DBTableChart.tsx
+++ b/packages/app/src/components/DBTableChart.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useMemo, useState } from 'react';
-import cx from 'classnames';
 import { inferNumericColumn } from '@hyperdx/common-utils/dist/clickhouse';
 import { isRatioChartConfig } from '@hyperdx/common-utils/dist/core/renderChartConfig';
 import {
@@ -12,7 +11,7 @@ import {
   ChartPaletteToken,
   ColorCondition,
 } from '@hyperdx/common-utils/dist/types';
-import { Text } from '@mantine/core';
+import { Loader, Text } from '@mantine/core';
 import { SortingState } from '@tanstack/react-table';
 
 import {
@@ -336,18 +335,17 @@ export default function DBTableChart({
     <ChartContainer title={title} toolbarItems={toolbarItemsMemo}>
       {isLoading && !data ? (
         <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
+          <Loader size="xs" mr="xs" />
           Loading Chart Data...
         </div>
       ) : isError && error ? (
         <ChartErrorState error={error} variant={errorVariant} />
       ) : data?.data.length === 0 ? (
-        <div
-          className={cx(
-            'd-flex h-100 w-100 align-items-center justify-content-center text-muted',
-            { 'effect-pulse': isPlaceholderData },
-          )}
-        >
-          No data found within time range.
+        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
+          {isPlaceholderData && <Loader size="xs" mr="xs" />}
+          {isPlaceholderData
+            ? 'Loading Chart Data...'
+            : 'No data found within time range.'}
         </div>
       ) : (
         <Table
diff --git a/packages/app/src/components/DBTimeChart.tsx b/packages/app/src/components/DBTimeChart.tsx
index 058ffcad7..8bde3a8d9 100644
--- a/packages/app/src/components/DBTimeChart.tsx
+++ b/packages/app/src/components/DBTimeChart.tsx
@@ -23,7 +23,7 @@ import {
   ChartConfigWithDateRange,
   DisplayType,
 } from '@hyperdx/common-utils/dist/types';
-import { Popover, Portal } from '@mantine/core';
+import { Loader, Popover, Portal } from '@mantine/core';
 import {
   IconChartAreaLine,
   IconChartBar,
@@ -1088,6 +1088,7 @@ function DBTimeChartComponent({
     <ChartContainer title={title} toolbarItems={toolbarItemsMemo}>
       {isLoading && !data ? (
         <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
+          <Loader size="xs" mr="xs" />
           Loading Chart Data...
         </div>
       ) : isError ? (
@@ -1103,7 +1104,10 @@ function DBTimeChartComponent({
         />
       ) : graphResults.length === 0 ? (
         <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-          No data found within time range.
+          {isLoadingOrPlaceholder && <Loader size="xs" mr="xs" />}
+          {isLoadingOrPlaceholder
+            ? 'Loading Chart Data...'
+            : 'No data found within time range.'}
         </div>
       ) : (
         <>
diff --git a/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx b/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx
index be0910712..95a5e5712 100644
--- a/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx
+++ b/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx
@@ -4,7 +4,7 @@ import {
   pickSampleWeightExpressionProps,
   type TTraceSource,
 } from '@hyperdx/common-utils/dist/types';
-import { Text } from '@mantine/core';
+import { Loader, Text } from '@mantine/core';
 
 import { ChartCard } from '@/components/charts/ChartCard';
 import { useQueriedChartConfig } from '@/hooks/useChartConfig';
@@ -78,6 +78,7 @@ export default function SlowestEventsTile({
       >
         {isLoading && !data ? (
           <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
+            <Loader size="xs" mr="xs" />
             Loading Chart Data...
           </div>
         ) : isError ? (
diff --git a/packages/app/src/components/__tests__/DBBarChart.test.tsx b/packages/app/src/components/__tests__/DBBarChart.test.tsx
index 6250a9a96..581349c49 100644
--- a/packages/app/src/components/__tests__/DBBarChart.test.tsx
+++ b/packages/app/src/components/__tests__/DBBarChart.test.tsx
@@ -114,7 +114,7 @@ describe('DBBarChart', () => {
       ).toBeNull();
     });
 
-    it('pulses the empty state while a refetch is running', () => {
+    it('shows loading instead of the stale empty result during a refetch', () => {
       mockUseQueriedChartConfig.mockReturnValue({
         data: { data: [], meta: groupedData.meta },
         isLoading: false,
@@ -123,9 +123,11 @@ describe('DBBarChart', () => {
       });
 
       renderWithMantine(<DBBarChart config={baseTestConfig} />);
-      expect(screen.getByText('No data found within time range.')).toHaveClass(
-        'effect-pulse',
-      );
+      const loadingState = screen.getByText('Loading Chart Data...');
+      expect(
+        loadingState.querySelector('.mantine-Loader-root'),
+      ).toBeInTheDocument();
+      expect(screen.queryByText('No data found within time range.')).toBeNull();
     });
   });
 
diff --git a/packages/app/src/components/__tests__/DBHistogramChart.test.tsx b/packages/app/src/components/__tests__/DBHistogramChart.test.tsx
index 1b242fa12..2ca9c63e1 100644
--- a/packages/app/src/components/__tests__/DBHistogramChart.test.tsx
+++ b/packages/app/src/components/__tests__/DBHistogramChart.test.tsx
@@ -192,7 +192,7 @@ describe('DBHistogramChart', () => {
       expect(chart()).not.toHaveClass('effect-pulse');
     });
 
-    it('pulses the empty state while a refresh loads', () => {
+    it('shows loading instead of the stale empty result during a refetch', () => {
       mockUseQueriedChartConfig.mockReturnValue({
         data: { data: [], meta: [] },
         isLoading: false,
@@ -202,9 +202,8 @@ describe('DBHistogramChart', () => {
 
       renderWithMantine(<DBHistogramChart config={baseTestConfig} />);
 
-      expect(screen.getByText('No data found within time range.')).toHaveClass(
-        'effect-pulse',
-      );
+      expect(screen.getByText('Loading Chart Data...')).toBeInTheDocument();
+      expect(screen.queryByText('No data found within time range.')).toBeNull();
     });
 
     it('does not pulse a fresh empty result', () => {
diff --git a/packages/app/src/components/__tests__/DBListBarChart.test.tsx b/packages/app/src/components/__tests__/DBListBarChart.test.tsx
index 9fbb6c218..4d3548675 100644
--- a/packages/app/src/components/__tests__/DBListBarChart.test.tsx
+++ b/packages/app/src/components/__tests__/DBListBarChart.test.tsx
@@ -209,7 +209,7 @@ describe('DBListBarChart', () => {
       expect(screen.getByText('checkout').closest('.effect-pulse')).toBeNull();
     });
 
-    it('pulses the empty state while a refresh loads', () => {
+    it('shows loading instead of the stale empty result during a refetch', () => {
       mockUseQueriedChartConfig.mockReturnValue({
         data: { data: [] },
         isLoading: false,
@@ -219,9 +219,8 @@ describe('DBListBarChart', () => {
 
       renderChart();
 
-      expect(screen.getByText('No data found within time range.')).toHaveClass(
-        'effect-pulse',
-      );
+      expect(screen.getByText('Loading Chart Data...')).toBeInTheDocument();
+      expect(screen.queryByText('No data found within time range.')).toBeNull();
     });
 
     it('does not pulse a fresh empty result', () => {
diff --git a/packages/app/src/components/__tests__/DBNumberChart.test.tsx b/packages/app/src/components/__tests__/DBNumberChart.test.tsx
index 556e78610..f25156d73 100644
--- a/packages/app/src/components/__tests__/DBNumberChart.test.tsx
+++ b/packages/app/src/components/__tests__/DBNumberChart.test.tsx
@@ -259,7 +259,7 @@ describe('DBNumberChart', () => {
       ).toBeNull();
     });
 
-    it('pulses the empty state while a refetch is running', () => {
+    it('shows loading instead of the stale empty result during a refetch', () => {
       mockUseQueriedChartConfig.mockReturnValue({
         data: { data: [] },
         isLoading: false,
@@ -268,9 +268,8 @@ describe('DBNumberChart', () => {
       });
 
       renderWithMantine(<DBNumberChart config={baseTestConfig} />);
-      expect(screen.getByText('No data found within time range.')).toHaveClass(
-        'effect-pulse',
-      );
+      expect(screen.getByText('Loading Chart Data...')).toBeInTheDocument();
+      expect(screen.queryByText('No data found within time range.')).toBeNull();
     });
   });
 
diff --git a/packages/app/src/components/__tests__/DBPieChart.test.tsx b/packages/app/src/components/__tests__/DBPieChart.test.tsx
index 06a23f9bf..1c51d3872 100644
--- a/packages/app/src/components/__tests__/DBPieChart.test.tsx
+++ b/packages/app/src/components/__tests__/DBPieChart.test.tsx
@@ -118,7 +118,7 @@ describe('DBPieChart', () => {
       );
     });
 
-    it('pulses the empty state while a refetch is running', () => {
+    it('shows loading instead of the stale empty result during a refetch', () => {
       mockUseQueriedChartConfig.mockReturnValue({
         data: { data: [], meta: groupedData.meta },
         isLoading: false,
@@ -127,9 +127,8 @@ describe('DBPieChart', () => {
       });
 
       renderWithMantine(<DBPieChart config={baseTestConfig} />);
-      expect(screen.getByText('No data found within time range.')).toHaveClass(
-        'effect-pulse',
-      );
+      expect(screen.getByText('Loading Chart Data...')).toBeInTheDocument();
+      expect(screen.queryByText('No data found within time range.')).toBeNull();
     });
   });
 
diff --git a/packages/app/src/components/__tests__/DBTableChart.test.tsx b/packages/app/src/components/__tests__/DBTableChart.test.tsx
index 75151f58e..06ebdba06 100644
--- a/packages/app/src/components/__tests__/DBTableChart.test.tsx
+++ b/packages/app/src/components/__tests__/DBTableChart.test.tsx
@@ -208,7 +208,7 @@ describe('DBTableChart', () => {
       ).toBeUndefined();
     });
 
-    it('pulses the empty state while a refetch is running', () => {
+    it('shows loading instead of the stale empty result during a refetch', () => {
       const current = jest.mocked(useOffsetPaginatedQuery)(baseTestConfig);
       jest.mocked(useOffsetPaginatedQuery).mockReturnValue({
         ...current,
@@ -216,12 +216,11 @@ describe('DBTableChart', () => {
         isPlaceholderData: true,
       });
 
-      const { getByText } = renderWithMantine(
+      const { getByText, queryByText } = renderWithMantine(
         <DBTableChart config={baseTestConfig} />,
       );
-      expect(getByText('No data found within time range.')).toHaveClass(
-        'effect-pulse',
-      );
+      expect(getByText('Loading Chart Data...')).toBeInTheDocument();
+      expect(queryByText('No data found within time range.')).toBeNull();
     });
 
     describe('row links', () => {
diff --git a/packages/app/src/theme/mantineTheme.ts b/packages/app/src/theme/mantineTheme.ts
index c6a520ea8..f4c2b68e1 100644
--- a/packages/app/src/theme/mantineTheme.ts
+++ b/packages/app/src/theme/mantineTheme.ts
@@ -4,6 +4,7 @@ import {
   Button,
   Checkbox,
   Code,
+  Loader,
   MantineTheme,
   MantineThemeOverride,
   Radio,
@@ -87,6 +88,11 @@ const makeTheme = ({
         },
       }),
     }),
+    Loader: Loader.extend({
+      defaultProps: {
+        color: 'var(--color-text-muted)',
+      },
+    }),
     Tooltip: Tooltip.extend({
       styles: () => ({
         tooltip: {

From 71d34eb4f5f0e32a1a1f80b339958558be044139 Mon Sep 17 00:00:00 2001
From: Aaron Knudtson <87577305+knudtty@users.noreply.github.com>
Date: Tue, 10 Nov 2026 14:14:07 -0500
Subject: [PATCH 2/3] pr suggestions

---
 packages/app/src/components/DBTimeChart.tsx   | 67 +++++++++++--------
 .../components/__tests__/DBTimeChart.test.tsx | 62 +++++++++++++++++
 2 files changed, 102 insertions(+), 27 deletions(-)

diff --git a/packages/app/src/components/DBTimeChart.tsx b/packages/app/src/components/DBTimeChart.tsx
index 8bde3a8d9..082a06fe8 100644
--- a/packages/app/src/components/DBTimeChart.tsx
+++ b/packages/app/src/components/DBTimeChart.tsx
@@ -552,24 +552,31 @@ function DBTimeChartComponent({
     { enabled: showMVOptimizationIndicator || showDateRangeIndicator },
   );
 
-  const { data, isLoading, isError, error, isPlaceholderData, isSuccess } =
-    useQueriedChartConfig(queriedConfig, {
-      placeholderData: (prev: any) => prev,
-      queryKey: [
-        queryKeyPrefix,
-        queriedConfig,
-        'chunked',
-        {
-          disableQueryChunking,
-          enableParallelQueries,
-          parallelizeWhenPossible: me?.team?.parallelizeWhenPossible,
-        },
-      ],
-      enabled: enabled && !isLoadingMe,
-      enableQueryChunking: !disableQueryChunking,
-      enableParallelQueries:
-        enableParallelQueries && me?.team?.parallelizeWhenPossible,
-    });
+  const {
+    data,
+    isLoading,
+    isFetching,
+    isError,
+    error,
+    isPlaceholderData,
+    isSuccess,
+  } = useQueriedChartConfig(queriedConfig, {
+    placeholderData: (prev: any) => prev,
+    queryKey: [
+      queryKeyPrefix,
+      queriedConfig,
+      'chunked',
+      {
+        disableQueryChunking,
+        enableParallelQueries,
+        parallelizeWhenPossible: me?.team?.parallelizeWhenPossible,
+      },
+    ],
+    enabled: enabled && !isLoadingMe,
+    enableQueryChunking: !disableQueryChunking,
+    enableParallelQueries:
+      enableParallelQueries && me?.team?.parallelizeWhenPossible,
+  });
 
   const previousPeriodChartConfig: ChartConfigWithDateRange = useMemo(() => {
     const previousPeriodDateRange =
@@ -599,13 +606,16 @@ function DBTimeChartComponent({
     previousPeriodChartConfig.dateRange,
   ]);
 
-  const { data: previousPeriodData, isLoading: isPreviousPeriodLoading } =
-    useQueriedChartConfig(previousPeriodChartConfig, {
-      placeholderData: (prev: any) => prev,
-      queryKey: [queryKeyPrefix, previousPeriodChartConfig, 'chunked'],
-      enabled: !!(enabled && config.compareToPreviousPeriod),
-      enableQueryChunking: true,
-    });
+  const {
+    data: previousPeriodData,
+    isLoading: isPreviousPeriodLoading,
+    isFetching: isPreviousPeriodFetching,
+  } = useQueriedChartConfig(previousPeriodChartConfig, {
+    placeholderData: (prev: any) => prev,
+    queryKey: [queryKeyPrefix, previousPeriodChartConfig, 'chunked'],
+    enabled: !!(enabled && config.compareToPreviousPeriod),
+    enableQueryChunking: true,
+  });
 
   const isLoadingOrPlaceholder =
     isLoading ||
@@ -613,6 +623,9 @@ function DBTimeChartComponent({
     !data?.isComplete ||
     (config.compareToPreviousPeriod && !previousPeriodData?.isComplete) ||
     isPlaceholderData;
+  // Unlike isLoadingOrPlaceholder, this goes false once both queries settle,
+  // even if one errors, so the empty state can't get stuck loading.
+  const isFetchingAnyPeriod = isFetching || isPreviousPeriodFetching;
 
   const { formatByColumn, chartFormat: axisNumberFormat } =
     useChartNumberFormats(queriedConfig, data?.meta);
@@ -1104,8 +1117,8 @@ function DBTimeChartComponent({
         />
       ) : graphResults.length === 0 ? (
         <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-          {isLoadingOrPlaceholder && <Loader size="xs" mr="xs" />}
-          {isLoadingOrPlaceholder
+          {isFetchingAnyPeriod && <Loader size="xs" mr="xs" />}
+          {isFetchingAnyPeriod
             ? 'Loading Chart Data...'
             : 'No data found within time range.'}
         </div>
diff --git a/packages/app/src/components/__tests__/DBTimeChart.test.tsx b/packages/app/src/components/__tests__/DBTimeChart.test.tsx
index bf460c349..629333a9b 100644
--- a/packages/app/src/components/__tests__/DBTimeChart.test.tsx
+++ b/packages/app/src/components/__tests__/DBTimeChart.test.tsx
@@ -161,6 +161,68 @@ describe('DBTimeChart', () => {
     expect(secondCallOptions.enabled).toBe(false);
   });
 
+  describe('empty state', () => {
+    const emptyResult = {
+      data: {
+        data: [],
+        meta: [
+          { name: 'timestamp', type: 'DateTime' },
+          { name: 'value', type: 'UInt64' },
+        ],
+        rows: 0,
+        isComplete: true,
+      },
+      isLoading: false,
+      isFetching: false,
+      isError: false,
+      isSuccess: true,
+      isPlaceholderData: false,
+    };
+    // Zero-filled buckets would otherwise render an empty line, not the empty state.
+    const emptyConfig = { ...baseTestConfig, fillNulls: false as const };
+    const isPreviousPeriod = (config: { dateRange: [Date, Date] }) =>
+      config.dateRange[0] < baseTestConfig.dateRange[0];
+
+    it('shows loading while the query is still fetching', () => {
+      mockUseQueriedChartConfig.mockReturnValue({
+        ...emptyResult,
+        data: { ...emptyResult.data, isComplete: false },
+        isFetching: true,
+      });
+
+      renderWithMantine(<DBTimeChart config={emptyConfig} />);
+
+      expect(screen.getByText('Loading Chart Data...')).toBeInTheDocument();
+    });
+
+    it('shows no data when the previous-period query fails', () => {
+      mockUseQueriedChartConfig.mockImplementation(config =>
+        isPreviousPeriod(config)
+          ? {
+              data: undefined,
+              isLoading: false,
+              isFetching: false,
+              isError: true,
+              error: new Error('previous period failed'),
+              isSuccess: false,
+              isPlaceholderData: false,
+            }
+          : emptyResult,
+      );
+
+      renderWithMantine(
+        <DBTimeChart
+          config={{ ...emptyConfig, compareToPreviousPeriod: true }}
+        />,
+      );
+
+      expect(
+        screen.getByText('No data found within time range.'),
+      ).toBeInTheDocument();
+      expect(screen.queryByText('Loading Chart Data...')).toBeNull();
+    });
+  });
+
   it('passes the same config to useMVOptimizationExplanation, useQueriedChartConfig, and MVOptimizationIndicator', () => {
     // Mock useSource to return a source so MVOptimizationIndicator is rendered
     jest.mocked(useSource).mockReturnValue({

From 6fe0604c724ee909f44027d2acb4b79d005c5a23 Mon Sep 17 00:00:00 2001
From: Aaron Knudtson <87577305+knudtty@users.noreply.github.com>
Date: Tue, 10 Nov 2026 14:17:27 -0500
Subject: [PATCH 3/3] deduplicate code

---
 packages/app/src/components/DBBarChart.tsx        | 15 ++++-----------
 packages/app/src/components/DBHistogramChart.tsx  | 15 ++++-----------
 packages/app/src/components/DBListBarChart.tsx    | 15 ++++-----------
 packages/app/src/components/DBNumberChart.tsx     | 15 ++++-----------
 packages/app/src/components/DBPieChart.tsx        | 15 ++++-----------
 packages/app/src/components/DBTableChart.tsx      | 15 ++++-----------
 packages/app/src/components/DBTimeChart.tsx       | 15 ++++-----------
 .../ServiceDashboardSlowestEventsTile.tsx         | 12 ++++--------
 .../app/src/components/charts/ChartEmptyState.tsx | 14 ++++++++++++++
 9 files changed, 46 insertions(+), 85 deletions(-)
 create mode 100644 packages/app/src/components/charts/ChartEmptyState.tsx

diff --git a/packages/app/src/components/DBBarChart.tsx b/packages/app/src/components/DBBarChart.tsx
index 148a07c9e..a5bfb4013 100644
--- a/packages/app/src/components/DBBarChart.tsx
+++ b/packages/app/src/components/DBBarChart.tsx
@@ -8,7 +8,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import { Flex, Loader } from '@mantine/core';
+import { Flex } from '@mantine/core';
 
 import type { NumberFormat } from '@/types';
 import { useContentFontSize } from '@/useUserPreferences';
@@ -19,6 +19,7 @@ import {
   useCategoricalChart,
 } from './charts/CategoricalChart';
 import ChartContainer from './charts/ChartContainer';
+import ChartEmptyState from './charts/ChartEmptyState';
 import ChartErrorState from './charts/ChartErrorState';
 import { ChartTooltipContainer, ChartTooltipItem } from './charts/ChartTooltip';
 
@@ -84,10 +85,7 @@ export const DBBarChart = (props: CategoricalChartProps) => {
   return (
     <ChartContainer title={props.title} toolbarItems={toolbarItems}>
       {isLoading && !data ? (
-        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-          <Loader size="xs" mr="xs" />
-          Loading Chart Data...
-        </div>
+        <ChartEmptyState isLoading />
       ) : isError && error ? (
         <ChartErrorState error={error} variant={props.errorVariant} />
       ) : responseFormatError ? (
@@ -96,12 +94,7 @@ export const DBBarChart = (props: CategoricalChartProps) => {
           variant={props.errorVariant}
         />
       ) : data?.data.length === 0 ? (
-        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-          {isPlaceholderData && <Loader size="xs" mr="xs" />}
-          {isPlaceholderData
-            ? 'Loading Chart Data...'
-            : 'No data found within time range.'}
-        </div>
+        <ChartEmptyState isLoading={isPlaceholderData} />
       ) : (
         <Flex
           data-testid="bar-chart-container"
diff --git a/packages/app/src/components/DBHistogramChart.tsx b/packages/app/src/components/DBHistogramChart.tsx
index cb007715d..a11471b86 100644
--- a/packages/app/src/components/DBHistogramChart.tsx
+++ b/packages/app/src/components/DBHistogramChart.tsx
@@ -10,7 +10,7 @@ import {
   YAxis,
 } from 'recharts';
 import { BuilderChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
-import { Loader, Text } from '@mantine/core';
+import { Text } from '@mantine/core';
 
 import { buildMVDateRangeIndicator, INTEGER_NUMBER_FORMAT } from '@/ChartUtils';
 import { useQueriedChartConfig } from '@/hooks/useChartConfig';
@@ -20,6 +20,7 @@ import { useContentFontSize } from '@/useUserPreferences';
 import { getColorFromCSSToken } from '@/utils';
 
 import ChartContainer from './charts/ChartContainer';
+import ChartEmptyState from './charts/ChartEmptyState';
 import ChartErrorState, {
   ChartErrorStateVariant,
 } from './charts/ChartErrorState';
@@ -296,19 +297,11 @@ export default function DBHistogramChart({
   return (
     <ChartContainer title={title} toolbarItems={toolbarItemsMemo}>
       {isLoading && !data ? (
-        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-          <Loader size="xs" mr="xs" />
-          Loading Chart Data...
-        </div>
+        <ChartEmptyState isLoading />
       ) : isError ? (
         <ChartErrorState error={error} variant={errorVariant} />
       ) : data?.data.length === 0 ? (
-        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-          {isPlaceholderData && <Loader size="xs" mr="xs" />}
-          {isPlaceholderData
-            ? 'Loading Chart Data...'
-            : 'No data found within time range.'}
-        </div>
+        <ChartEmptyState isLoading={isPlaceholderData} />
       ) : (
         <HistogramChart
           graphResults={buckets}
diff --git a/packages/app/src/components/DBListBarChart.tsx b/packages/app/src/components/DBListBarChart.tsx
index 459a4cc3f..29e1290d6 100644
--- a/packages/app/src/components/DBListBarChart.tsx
+++ b/packages/app/src/components/DBListBarChart.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { omit } from 'lodash';
 import { BuilderChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
 import type { FloatingPosition } from '@mantine/core';
-import { Box, Flex, HoverCard, Loader, Text } from '@mantine/core';
+import { Box, Flex, HoverCard, Text } from '@mantine/core';
 
 import { buildMVDateRangeIndicator } from '@/ChartUtils';
 import { useQueriedChartConfig } from '@/hooks/useChartConfig';
@@ -13,6 +13,7 @@ import type { NumberFormat } from '@/types';
 import { formatNumber, semanticKeyedColor } from '@/utils';
 
 import ChartContainer from './charts/ChartContainer';
+import ChartEmptyState from './charts/ChartEmptyState';
 import ChartErrorState, {
   ChartErrorStateVariant,
 } from './charts/ChartErrorState';
@@ -277,19 +278,11 @@ export default function DBListBarChart({
       disableReactiveContainer
     >
       {isLoading && !data ? (
-        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-          <Loader size="xs" mr="xs" />
-          Loading Chart Data...
-        </div>
+        <ChartEmptyState isLoading />
       ) : isError ? (
         <ChartErrorState error={error} variant={errorVariant} />
       ) : data?.data.length === 0 ? (
-        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-          {isPlaceholderData && <Loader size="xs" mr="xs" />}
-          {isPlaceholderData
-            ? 'Loading Chart Data...'
-            : 'No data found within time range.'}
-        </div>
+        <ChartEmptyState isLoading={isPlaceholderData} />
       ) : (
         <div className={isPlaceholderData ? 'effect-pulse' : undefined}>
           <ListBar
diff --git a/packages/app/src/components/DBNumberChart.tsx b/packages/app/src/components/DBNumberChart.tsx
index e4d3195a7..758251ccb 100644
--- a/packages/app/src/components/DBNumberChart.tsx
+++ b/packages/app/src/components/DBNumberChart.tsx
@@ -13,7 +13,7 @@ import {
   ChartConfigWithDateRange,
   resolveChartPaletteToken,
 } from '@hyperdx/common-utils/dist/types';
-import { Flex, Loader, Text } from '@mantine/core';
+import { Flex, Text } from '@mantine/core';
 
 import {
   buildMVDateRangeIndicator,
@@ -33,6 +33,7 @@ import {
 } from '@/utils';
 
 import ChartContainer from './charts/ChartContainer';
+import ChartEmptyState from './charts/ChartEmptyState';
 import ChartErrorState, {
   ChartErrorStateVariant,
 } from './charts/ChartErrorState';
@@ -381,21 +382,13 @@ export default function DBNumberChart({
   return (
     <ChartContainer title={title} toolbarItems={toolbarItemsMemo}>
       {isLoading && !data ? (
-        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-          <Loader size="xs" mr="xs" />
-          Loading Chart Data...
-        </div>
+        <ChartEmptyState isLoading />
       ) : isError ? (
         <ChartErrorState error={error} variant={errorVariant} />
       ) : resultError ? (
         <ChartErrorState error={resultError} variant={errorVariant} />
       ) : data?.data.length === 0 ? (
-        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-          {isPlaceholderData && <Loader size="xs" mr="xs" />}
-          {isPlaceholderData
-            ? 'Loading Chart Data...'
-            : 'No data found within time range.'}
-        </div>
+        <ChartEmptyState isLoading={isPlaceholderData} />
       ) : (
         <div
           className={isLoading || isPlaceholderData ? 'effect-pulse' : ''}
diff --git a/packages/app/src/components/DBPieChart.tsx b/packages/app/src/components/DBPieChart.tsx
index cbd28e476..a7b1c8036 100644
--- a/packages/app/src/components/DBPieChart.tsx
+++ b/packages/app/src/components/DBPieChart.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
-import { Box, Flex, Loader, ScrollArea, Text } from '@mantine/core';
+import { Box, Flex, ScrollArea, Text } from '@mantine/core';
 
 import type { NumberFormat } from '@/types';
 import { formatNumber, truncateMiddle } from '@/utils';
@@ -10,6 +10,7 @@ import {
   useCategoricalChart,
 } from './charts/CategoricalChart';
 import ChartContainer from './charts/ChartContainer';
+import ChartEmptyState from './charts/ChartEmptyState';
 import ChartErrorState from './charts/ChartErrorState';
 import { ChartTooltipContainer, ChartTooltipItem } from './charts/ChartTooltip';
 
@@ -104,21 +105,13 @@ export const DBPieChart = (props: CategoricalChartProps) => {
   return (
     <ChartContainer title={title} toolbarItems={toolbarItems}>
       {isLoading && !data ? (
-        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-          <Loader size="xs" mr="xs" />
-          Loading Chart Data...
-        </div>
+        <ChartEmptyState isLoading />
       ) : isError && error ? (
         <ChartErrorState error={error} variant={errorVariant} />
       ) : responseFormatError ? (
         <ChartErrorState error={responseFormatError} variant={errorVariant} />
       ) : data?.data.length === 0 ? (
-        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-          {isPlaceholderData && <Loader size="xs" mr="xs" />}
-          {isPlaceholderData
-            ? 'Loading Chart Data...'
-            : 'No data found within time range.'}
-        </div>
+        <ChartEmptyState isLoading={isPlaceholderData} />
       ) : (
         <Flex
           data-testid="pie-chart-container"
diff --git a/packages/app/src/components/DBTableChart.tsx b/packages/app/src/components/DBTableChart.tsx
index f11a295f2..028a6cae1 100644
--- a/packages/app/src/components/DBTableChart.tsx
+++ b/packages/app/src/components/DBTableChart.tsx
@@ -11,7 +11,7 @@ import {
   ChartPaletteToken,
   ColorCondition,
 } from '@hyperdx/common-utils/dist/types';
-import { Loader, Text } from '@mantine/core';
+import { Text } from '@mantine/core';
 import { SortingState } from '@tanstack/react-table';
 
 import {
@@ -34,6 +34,7 @@ import type { TileFilterHandler } from '@/types';
 import { useIntersectionObserver } from '@/utils';
 
 import ChartContainer from './charts/ChartContainer';
+import ChartEmptyState from './charts/ChartEmptyState';
 import ChartErrorState, {
   ChartErrorStateVariant,
 } from './charts/ChartErrorState';
@@ -334,19 +335,11 @@ export default function DBTableChart({
   return (
     <ChartContainer title={title} toolbarItems={toolbarItemsMemo}>
       {isLoading && !data ? (
-        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-          <Loader size="xs" mr="xs" />
-          Loading Chart Data...
-        </div>
+        <ChartEmptyState isLoading />
       ) : isError && error ? (
         <ChartErrorState error={error} variant={errorVariant} />
       ) : data?.data.length === 0 ? (
-        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-          {isPlaceholderData && <Loader size="xs" mr="xs" />}
-          {isPlaceholderData
-            ? 'Loading Chart Data...'
-            : 'No data found within time range.'}
-        </div>
+        <ChartEmptyState isLoading={isPlaceholderData} />
       ) : (
         <Table
           data={data?.data ?? []}
diff --git a/packages/app/src/components/DBTimeChart.tsx b/packages/app/src/components/DBTimeChart.tsx
index 082a06fe8..5e2f24db2 100644
--- a/packages/app/src/components/DBTimeChart.tsx
+++ b/packages/app/src/components/DBTimeChart.tsx
@@ -23,7 +23,7 @@ import {
   ChartConfigWithDateRange,
   DisplayType,
 } from '@hyperdx/common-utils/dist/types';
-import { Loader, Popover, Portal } from '@mantine/core';
+import { Popover, Portal } from '@mantine/core';
 import {
   IconChartAreaLine,
   IconChartBar,
@@ -65,6 +65,7 @@ import { useTimeZoneLinkParam } from '@/timeZoneOverride';
 import type { NumberFormat, TileFilterHandler } from '@/types';
 
 import ChartContainer from './charts/ChartContainer';
+import ChartEmptyState from './charts/ChartEmptyState';
 import ChartErrorState, {
   ChartErrorStateVariant,
 } from './charts/ChartErrorState';
@@ -1100,10 +1101,7 @@ function DBTimeChartComponent({
   return (
     <ChartContainer title={title} toolbarItems={toolbarItemsMemo}>
       {isLoading && !data ? (
-        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-          <Loader size="xs" mr="xs" />
-          Loading Chart Data...
-        </div>
+        <ChartEmptyState isLoading />
       ) : isError ? (
         <ChartErrorState error={error} variant={errorVariant} />
       ) : resultFormattingError ? (
@@ -1116,12 +1114,7 @@ function DBTimeChartComponent({
           }
         />
       ) : graphResults.length === 0 ? (
-        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-          {isFetchingAnyPeriod && <Loader size="xs" mr="xs" />}
-          {isFetchingAnyPeriod
-            ? 'Loading Chart Data...'
-            : 'No data found within time range.'}
-        </div>
+        <ChartEmptyState isLoading={isFetchingAnyPeriod} />
       ) : (
         <>
           {/* Pinned (click-locked) tooltip; hover is handled in MemoChart. */}
diff --git a/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx b/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx
index 95a5e5712..1c2638c05 100644
--- a/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx
+++ b/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx
@@ -4,13 +4,14 @@ import {
   pickSampleWeightExpressionProps,
   type TTraceSource,
 } from '@hyperdx/common-utils/dist/types';
-import { Loader, Text } from '@mantine/core';
+import { Text } from '@mantine/core';
 
 import { ChartCard } from '@/components/charts/ChartCard';
 import { useQueriedChartConfig } from '@/hooks/useChartConfig';
 import { useServiceDashboardExpressions } from '@/serviceDashboard';
 
 import ChartContainer from './charts/ChartContainer';
+import ChartEmptyState from './charts/ChartEmptyState';
 import ChartErrorState from './charts/ChartErrorState';
 import DBSqlRowTableWithSideBar from './DBSqlRowTableWithSidebar';
 
@@ -77,16 +78,11 @@ export default function SlowestEventsTile({
         ]}
       >
         {isLoading && !data ? (
-          <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-            <Loader size="xs" mr="xs" />
-            Loading Chart Data...
-          </div>
+          <ChartEmptyState isLoading />
         ) : isError ? (
           <ChartErrorState error={error} />
         ) : data?.data.length === 0 ? (
-          <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-            No data found within time range.
-          </div>
+          <ChartEmptyState />
         ) : (
           source &&
           expressions && (
diff --git a/packages/app/src/components/charts/ChartEmptyState.tsx b/packages/app/src/components/charts/ChartEmptyState.tsx
new file mode 100644
index 000000000..83916b759
--- /dev/null
+++ b/packages/app/src/components/charts/ChartEmptyState.tsx
@@ -0,0 +1,14 @@
+import { Loader } from '@mantine/core';
+
+export default function ChartEmptyState({
+  isLoading = false,
+}: {
+  isLoading?: boolean;
+}) {
+  return (
+    <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
+      {isLoading && <Loader size="xs" mr="xs" />}
+      {isLoading ? 'Loading Chart Data...' : 'No data found within time range.'}
+    </div>
+  );
+}