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..a5bfb4013 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,
@@ -20,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';
 
@@ -85,9 +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">
-          Loading Chart Data...
-        </div>
+        <ChartEmptyState isLoading />
       ) : isError && error ? (
         <ChartErrorState error={error} variant={props.errorVariant} />
       ) : responseFormatError ? (
@@ -96,14 +94,7 @@ 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>
+        <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 0e8ffa0e7..a11471b86 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 {
@@ -21,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';
@@ -297,20 +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">
-          Loading Chart Data...
-        </div>
+        <ChartEmptyState isLoading />
       ) : 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>
+        <ChartEmptyState isLoading={isPlaceholderData} />
       ) : (
         <HistogramChart
           graphResults={buckets}
diff --git a/packages/app/src/components/DBListBarChart.tsx b/packages/app/src/components/DBListBarChart.tsx
index ef463ff1d..29e1290d6 100644
--- a/packages/app/src/components/DBListBarChart.tsx
+++ b/packages/app/src/components/DBListBarChart.tsx
@@ -1,6 +1,5 @@
 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';
@@ -14,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';
@@ -278,20 +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">
-          Loading Chart Data...
-        </div>
+        <ChartEmptyState isLoading />
       ) : 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>
+        <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 6bbf580e3..758251ccb 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,
@@ -34,6 +33,7 @@ import {
 } from '@/utils';
 
 import ChartContainer from './charts/ChartContainer';
+import ChartEmptyState from './charts/ChartEmptyState';
 import ChartErrorState, {
   ChartErrorStateVariant,
 } from './charts/ChartErrorState';
@@ -382,22 +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">
-          Loading Chart Data...
-        </div>
+        <ChartEmptyState isLoading />
       ) : isError ? (
         <ChartErrorState error={error} variant={errorVariant} />
       ) : 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>
+        <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 7409bd069..a7b1c8036 100644
--- a/packages/app/src/components/DBPieChart.tsx
+++ b/packages/app/src/components/DBPieChart.tsx
@@ -1,5 +1,4 @@
 import { memo } from 'react';
-import cx from 'classnames';
 import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
 import { Box, Flex, ScrollArea, Text } from '@mantine/core';
 
@@ -11,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';
 
@@ -105,22 +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">
-          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={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>
+        <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 d0fb12206..028a6cae1 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 {
@@ -35,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';
@@ -335,20 +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">
-          Loading Chart Data...
-        </div>
+        <ChartEmptyState isLoading />
       ) : 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>
+        <ChartEmptyState isLoading={isPlaceholderData} />
       ) : (
         <Table
           data={data?.data ?? []}
diff --git a/packages/app/src/components/DBTimeChart.tsx b/packages/app/src/components/DBTimeChart.tsx
index 058ffcad7..5e2f24db2 100644
--- a/packages/app/src/components/DBTimeChart.tsx
+++ b/packages/app/src/components/DBTimeChart.tsx
@@ -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';
@@ -552,24 +553,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 +607,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 +624,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);
@@ -1087,9 +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">
-          Loading Chart Data...
-        </div>
+        <ChartEmptyState isLoading />
       ) : isError ? (
         <ChartErrorState error={error} variant={errorVariant} />
       ) : resultFormattingError ? (
@@ -1102,9 +1114,7 @@ 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.
-        </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 be0910712..1c2638c05 100644
--- a/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx
+++ b/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx
@@ -11,6 +11,7 @@ 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,15 +78,11 @@ export default function SlowestEventsTile({
         ]}
       >
         {isLoading && !data ? (
-          <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-            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/__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/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({
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>
+  );
+}
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: {