fix(app): keep search and pattern tiles on screen while a dashboard refreshes

.changeset/pattern-tile-refresh-pulse.md

@@ -0,0 +1,10 @@
+---
+'@hyperdx/app': patch
+---
+
+fix: keep pattern tiles on screen while a dashboard refreshes
+
+During a refresh, event pattern tiles dropped their patterns and showed a
+loading state until the new sample was mined. They now keep the current
+patterns on screen and pulse while the refetch runs, like the other dashboard
+tiles.

.changeset/search-tile-refresh-pulse.md

@@ -0,0 +1,9 @@
+---
+'@hyperdx/app': patch
+---
+
+fix: keep search tile rows on screen while a dashboard refreshes
+
+During a refresh, search tiles dropped their rows and showed a loading state
+until the new results arrived. They now keep the current rows on screen and
+pulse while the refetch runs, like the other dashboard tiles.

packages/app/src/DBDashboardPage.tsx

@@ -1416,6 +1416,7 @@ const Tile = ({
                       queryKeyPrefix={'search'}
                       variant="default"
                       errorVariant="collapsible"
+                      keepPreviousData
                     />
                   </ChartContainer>
                 )}
@@ -1467,6 +1468,7 @@ const Tile = ({
                         granularity: undefined,
                       }}
                       totalCountQueryKeyPrefix={`dashboard-patterns-${chart.id}`}
+                      keepPreviousData
                     />
                   </ChartContainer>
                 )}

packages/app/src/components/DBRowTable.tsx

@@ -378,6 +378,7 @@ export const RawLogTable = memo(
     getRowWhere,
     variant = 'default',
     onRemoveColumn,
+    className,
   }: {
     wrapLines?: boolean;
     displayedColumns: string[];
@@ -421,6 +422,9 @@ export const RawLogTable = memo(
     getRowWhere?: (row: Record<string, any>) => RowWhereResult;
     variant?: DBRowTableVariant;
     onRemoveColumn?: (column: string) => void;
+    // Extra classes for the scroll container, e.g. `effect-pulse` while the
+    // tile is refreshing.
+    className?: string;
   }) => {
     const dedupedRows = useMemo(() => {
       const lIds = new Set();
@@ -986,9 +990,13 @@ export const RawLogTable = memo(
           />
           <div
             data-testid="search-results-table"
-            className={cx(styles.tableWrapper, {
-              [styles.muted]: variant === 'muted',
-            })}
+            className={cx(
+              styles.tableWrapper,
+              {
+                [styles.muted]: variant === 'muted',
+              },
+              className,
+            )}
             onScroll={e => {
               fetchMoreOnBottomReached(e.target as HTMLDivElement);
 
@@ -1580,6 +1588,7 @@ function DBSqlRowTableComponent({
   tableId,
   errorVariant,
   onResolvedColumnsChange,
+  keepPreviousData,
 }: {
   config: BuilderChartConfigWithDateRange;
   sourceId?: string;
@@ -1613,6 +1622,8 @@ function DBSqlRowTableComponent({
   tableId?: string;
   errorVariant?: ChartErrorStateVariant;
   onResolvedColumnsChange?: (meta: ColumnMetaType[]) => void;
+  /** Keep the current rows on screen while a refresh loads a new date range */
+  keepPreviousData?: boolean;
 }) {
   const { data: me } = api.useMe();
   const { toggleColumn, displayedColumns: contextDisplayedColumns } =
@@ -1672,14 +1683,22 @@ function DBSqlRowTableComponent({
 
   const mergedConfig = useConfigWithAdditionalSelect(mergedConfigObj, sourceId);
 
-  const { data, fetchNextPage, hasNextPage, isFetching, isError, error } =
-    useOffsetPaginatedQuery(mergedConfig ?? config, {
-      enabled:
-        enabled && mergedConfig != null && getSelectLength(config.select) > 0,
-      isLive,
-      queryKeyPrefix,
-      enableSmallFirstWindow,
-    });
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    isError,
+    error,
+    isPlaceholderData,
+  } = useOffsetPaginatedQuery(mergedConfig ?? config, {
+    enabled:
+      enabled && mergedConfig != null && getSelectLength(config.select) > 0,
+    isLive,
+    queryKeyPrefix,
+    enableSmallFirstWindow,
+    keepPreviousData,
+  });
 
   // The first N columns are the select columns from the user
   // We can't use names as CH may rewrite the names
@@ -1934,6 +1953,9 @@ function DBSqlRowTableComponent({
         variant={variant}
         onRemoveColumn={toggleColumn ? onRemoveColumnFromTable : undefined}
         tableId={tableId}
+        className={
+          keepPreviousData && isPlaceholderData ? 'effect-pulse' : undefined
+        }
       />
     </>
   );

packages/app/src/components/DBSqlRowTableWithSidebar.tsx

@@ -50,6 +50,8 @@ interface Props {
   selectionResetKey?: string;
   onSelectedRowsChange?: (hasSelectedRows: boolean) => void;
   onResolvedColumnsChange?: (meta: ColumnMetaType[]) => void;
+  /** Keep the current rows on screen while a refresh loads a new date range */
+  keepPreviousData?: boolean;
   // Clicking outside the row side panel (and outside `keepOpenSelector`) closes
   // it. Enabled by default; pass `false` to opt out.
   closeOnClickOutside?: boolean;
@@ -82,6 +84,7 @@ export default function DBSqlRowTableWithSideBar({
   selectionResetKey,
   onSelectedRowsChange,
   onResolvedColumnsChange,
+  keepPreviousData,
   closeOnClickOutside = true,
   keepOpenSelector = DEFAULT_KEEP_OPEN_SELECTOR,
 }: Props) {
@@ -156,6 +159,7 @@ export default function DBSqlRowTableWithSideBar({
         selectionResetKey={selectionResetKey}
         onSelectedRowsChange={onSelectedRowsChange}
         onResolvedColumnsChange={onResolvedColumnsChange}
+        keepPreviousData={keepPreviousData}
       />
     </RowSidePanelContext>
   );

packages/app/src/components/PatternTable.tsx

@@ -31,6 +31,7 @@ export default function PatternTable({
   onDraftPatternColumnChange: externalOnDraftPatternColumnChange,
   onSubmit: externalOnSubmit,
   source,
+  keepPreviousData,
 }: {
   config: BuilderChartConfigWithDateRange;
   totalCountConfig: BuilderChartConfigWithDateRange;
@@ -41,6 +42,8 @@ export default function PatternTable({
   onSubmit?: () => void;
   totalCountQueryKeyPrefix: string;
   source?: TSource;
+  /** Keep the current patterns on screen while a refresh loads a new date range */
+  keepPreviousData?: boolean;
 }) {
   const SAMPLES = 10_000;
 
@@ -69,6 +72,8 @@ export default function PatternTable({
   const {
     data: groupedResults,
     isLoading: isGroupedPatternsLoading,
+    // Only true with `keepPreviousData`, while the previous patterns are shown
+    isPlaceholderData: isRefreshing,
     error: groupedPatternsError,
     patternQueryConfig,
   } = useGroupedPatterns({
@@ -81,6 +86,7 @@ export default function PatternTable({
         source.serviceNameExpression) ||
       '',
     totalCount,
+    keepPreviousData,
   });
 
   const isLoading =
@@ -142,7 +148,9 @@ export default function PatternTable({
           <RawLogTable
             isLive={false}
             wrapLines={true}
-            isLoading={isLoading}
+            // The pulse is the only refresh indicator, not the loading footer
+            isLoading={isLoading && !isRefreshing}
+            className={isRefreshing ? 'effect-pulse' : undefined}
             rows={sortedGroupedResults ?? []}
             displayedColumns={[
               '__hdx_pattern_trend',

packages/app/src/components/__tests__/DBSqlRowTable.test.tsx

@@ -0,0 +1,127 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { screen } from '@testing-library/react';
+
+import { DBSqlRowTable } from '@/components/DBRowTable';
+
+const mockUseOffsetPaginatedQuery = jest.fn();
+jest.mock('@/hooks/useOffsetPaginatedQuery', () => ({
+  __esModule: true,
+  default: (...args: unknown[]) => mockUseOffsetPaginatedQuery(...args),
+}));
+
+jest.mock('@/api', () => ({
+  __esModule: true,
+  default: { useMe: () => ({ data: { team: {} } }) },
+}));
+
+jest.mock('@/hooks/useMetadata', () => ({
+  ...jest.requireActual('@/hooks/useMetadata'),
+  useColumns: () => ({ data: undefined }),
+  useTableMetadata: () => ({
+    data: { primary_key: 'Timestamp', partition_key: 'toDate(Timestamp)' },
+  }),
+}));
+
+jest.mock('@/hooks/usePatterns', () => ({
+  ...jest.requireActual('@/hooks/usePatterns'),
+  useGroupedPatterns: () => ({ data: {}, isLoading: false, miner: null }),
+}));
+
+jest.mock('@/source', () => ({
+  ...jest.requireActual('@/source'),
+  useSource: () => ({ data: undefined }),
+}));
+
+jest.mock('@/hooks/useChartConfig', () => ({
+  ...jest.requireActual('@/hooks/useChartConfig'),
+  useAliasMapFromChartConfig: () => ({ data: {}, isLoading: false }),
+  useRenderedSqlChartConfig: () => ({ data: '', isLoading: false }),
+}));
+
+const config: React.ComponentProps<typeof DBSqlRowTable>['config'] = {
+  select: 'Body',
+  from: { databaseName: 'default', tableName: 'otel_logs' },
+  where: '',
+  timestampValueExpression: 'Timestamp',
+  connection: 'test-connection',
+  dateRange: [
+    new Date('2026-07-06T00:00:00Z'),
+    new Date('2026-07-06T01:00:00Z'),
+  ],
+};
+
+function mockQueryResult({
+  isPlaceholderData,
+}: {
+  isPlaceholderData: boolean;
+}) {
+  mockUseOffsetPaginatedQuery.mockReturnValue({
+    data: {
+      data: [{ Body: 'previous row' }],
+      meta: [{ name: 'Body', type: 'String' }],
+      window: undefined,
+    },
+    fetchNextPage: jest.fn(),
+    hasNextPage: false,
+    isFetching: isPlaceholderData,
+    isError: false,
+    error: null,
+    isPlaceholderData,
+  });
+}
+
+function renderTable(
+  props: Partial<React.ComponentProps<typeof DBSqlRowTable>>,
+) {
+  return renderWithMantine(
+    <QueryClientProvider client={new QueryClient()}>
+      <DBSqlRowTable config={config} sourceId="source-id" {...props} />
+    </QueryClientProvider>,
+  );
+}
+
+describe('DBSqlRowTable refresh', () => {
+  beforeEach(() => {
+    mockUseOffsetPaginatedQuery.mockReset();
+  });
+
+  it('asks the query to keep the previous rows when keepPreviousData is set', () => {
+    mockQueryResult({ isPlaceholderData: false });
+
+    renderTable({ keepPreviousData: true });
+
+    expect(mockUseOffsetPaginatedQuery.mock.calls[0][1]).toEqual(
+      expect.objectContaining({ keepPreviousData: true }),
+    );
+  });
+
+  it('pulses the previous rows while a refresh loads', () => {
+    mockQueryResult({ isPlaceholderData: true });
+
+    renderTable({ keepPreviousData: true });
+
+    expect(screen.getByTestId('search-results-table')).toHaveClass(
+      'effect-pulse',
+    );
+  });
+
+  it('does not pulse once fresh rows have loaded', () => {
+    mockQueryResult({ isPlaceholderData: false });
+
+    renderTable({ keepPreviousData: true });
+
+    expect(screen.getByTestId('search-results-table')).not.toHaveClass(
+      'effect-pulse',
+    );
+  });
+
+  it('does not pulse without keepPreviousData (e.g. live tail on the search page)', () => {
+    mockQueryResult({ isPlaceholderData: true });
+
+    renderTable({ isLive: true });
+
+    expect(screen.getByTestId('search-results-table')).not.toHaveClass(
+      'effect-pulse',
+    );
+  });
+});