gloomberb 0.9.2 → 0.9.4

package/src/plugins/prediction-markets/detail/pane.tsx

@@ -1,7 +1,7 @@
 import { Box, ScrollBox, Text } from "../../../ui";
 import { TextAttributes, type ScrollBoxRenderable } from "../../../ui";
 import type { RefObject } from "react";
-import { Spinner, Tabs } from "../../../components";
+import { Tabs } from "../../../components";
 import { EmptyState } from "../../../components/ui/status";
 import { colors } from "../../../theme/colors";
 import { padTo } from "../../../utils/format";
@@ -37,8 +37,11 @@ interface MetricCell {
 function MetricLabelRow({ metrics }: { metrics: MetricCell[] }) {
   return (
     <Box flexDirection="row" height={1}>
-      {metrics.map((metric) => (
-        <Box key={metric.label} width={metric.width + 1}>
+      {metrics.map((metric, index) => (
+        <Box
+          key={metric.label}
+          width={metric.width + (index === metrics.length - 1 ? 0 : 1)}
+        >
           <Text fg={colors.textDim}>{padTo(metric.label, metric.width)}</Text>
         </Box>
       ))}
@@ -49,8 +52,11 @@ function MetricLabelRow({ metrics }: { metrics: MetricCell[] }) {
 function MetricValueRow({ metrics }: { metrics: MetricCell[] }) {
   return (
     <Box flexDirection="row" height={1}>
-      {metrics.map((metric) => (
-        <Box key={metric.label} width={metric.width + 1}>
+      {metrics.map((metric, index) => (
+        <Box
+          key={metric.label}
+          width={metric.width + (index === metrics.length - 1 ? 0 : 1)}
+        >
           <Text
             fg={metric.color ?? colors.textBright}
             attributes={TextAttributes.BOLD}
@@ -108,8 +114,6 @@ export function PredictionMarketDetailPane({
   }
 
   const summaryMetrics = detail?.summary ?? selectedSummary;
-  const detailTitle =
-    selectedRow?.kind === "group" ? selectedRow.title : summaryMetrics.title;
   const detailSubtitleParts: string[] = [];
   if (selectedRow?.kind === "group") {
     if (summaryMetrics.category) detailSubtitleParts.push(summaryMetrics.category);
@@ -126,18 +130,18 @@ export function PredictionMarketDetailPane({
   );
   if (endsLabel !== "—") detailSubtitleParts.push(endsLabel);
   const detailSubtitle = detailSubtitleParts.join(" · ");
-  const primaryMetrics: MetricCell[] = [
+  const metrics: MetricCell[] = [
     {
       label: "YES",
       value: formatPredictionProbability(summaryMetrics.yesPrice),
       color: getPredictionProbabilityColor(summaryMetrics.yesPrice),
-      width: 12,
+      width: 6,
     },
     {
       label: "NO",
       value: formatPredictionProbability(summaryMetrics.noPrice),
       color: getPredictionProbabilityColor(summaryMetrics.noPrice),
-      width: 12,
+      width: 6,
     },
     {
       label: "24H VOL",
@@ -145,7 +149,7 @@ export function PredictionMarketDetailPane({
         summaryMetrics.volume24h,
         summaryMetrics.volume24hUnit ?? "usd",
       ),
-      width: 16,
+      width: 8,
     },
     {
       label: "TOTAL VOL",
@@ -153,28 +157,26 @@ export function PredictionMarketDetailPane({
         summaryMetrics.totalVolume,
         summaryMetrics.totalVolumeUnit ?? "usd",
       ),
-      width: 16,
+      width: 9,
     },
-  ];
-  const secondaryMetrics: MetricCell[] = [
     {
       label: "OI",
       value: formatPredictionMetric(
         summaryMetrics.openInterest,
         summaryMetrics.openInterestUnit ?? "usd",
       ),
-      width: 16,
+      width: 7,
     },
     {
       label: "SPREAD",
       value: formatPredictionSpread(summaryMetrics.spread),
-      width: 16,
+      width: 7,
     },
     {
       label: "LAST",
       value: formatPredictionProbability(summaryMetrics.lastTradePrice),
       color: colors.textBright,
-      width: 16,
+      width: 7,
     },
   ];
   const relatedSiblings =
@@ -186,33 +188,25 @@ export function PredictionMarketDetailPane({
             0,
             Math.max(Math.min(Math.floor((detailWidth - 10) / 18), 3), 0),
           ) ?? []);
-  const headerHeight = detailSubtitle.length > 0 ? 3 : 2;
+  const headerHeight = detailSubtitle.length > 0 ? 2 : 0;
   const detailLoading = detailLoadCount > 0 && !detail;
-  const titleColor = focused ? colors.textBright : colors.text;
   const detailTextWidth = Math.max(detailWidth, 12);
 
   return (
     <>
-      <Box flexDirection="column" height={headerHeight} paddingBottom={1}>
-        <Box flexDirection="row" height={1}>
-          <Text fg={titleColor} attributes={TextAttributes.BOLD}>
-            {truncatePredictionText(detailTitle, detailTextWidth)}
-          </Text>
-        </Box>
-        {detailSubtitle.length > 0 && (
+      {headerHeight > 0 && (
+        <Box flexDirection="column" height={headerHeight} paddingBottom={1}>
           <Box flexDirection="row" height={1}>
             <Text fg={colors.textDim}>
               {truncatePredictionText(detailSubtitle, detailTextWidth)}
             </Text>
           </Box>
-        )}
-      </Box>
+        </Box>
+      )}
 
-      <Box flexDirection="column" height={4} paddingBottom={1}>
-        <MetricLabelRow metrics={primaryMetrics} />
-        <MetricValueRow metrics={primaryMetrics} />
-        <MetricLabelRow metrics={secondaryMetrics} />
-        <MetricValueRow metrics={secondaryMetrics} />
+      <Box flexDirection="column" height={3} paddingBottom={1}>
+        <MetricLabelRow metrics={metrics} />
+        <MetricValueRow metrics={metrics} />
       </Box>
 
       {relatedSiblings.length > 0 && (
@@ -260,43 +254,56 @@ export function PredictionMarketDetailPane({
         </Box>
       )}
 
-      <ScrollBox ref={scrollRef} flexGrow={1} scrollY>
-        {detailLoading && (
-          <Box height={1} paddingBottom={1}>
-            <Spinner label="Loading market detail..." />
-          </Box>
-        )}
-        {detailTab === "overview" && (
-          <PredictionMarketOverviewView
-            detail={detail}
-            detailWidth={detailWidth}
-            height={height}
-            historyRange={historyRange}
-            onHistoryRangeChange={onHistoryRangeChange}
-            onSelectMarket={onSelectMarket}
-            selectedRow={selectedRow}
-            summary={summaryMetrics}
-          />
-        )}
+      {detailTab === "overview" || detailTab === "rules" ? (
+        <ScrollBox ref={scrollRef} flexGrow={1} scrollY>
+          {detailTab === "overview" && (
+            <PredictionMarketOverviewView
+              detail={detail}
+              detailWidth={detailWidth}
+              height={height}
+              historyRange={historyRange}
+              loading={detailLoading}
+              onHistoryRangeChange={onHistoryRangeChange}
+              onSelectMarket={onSelectMarket}
+              selectedRow={selectedRow}
+              summary={summaryMetrics}
+            />
+          )}
 
-        {detailTab === "book" && detail && (
+          {detailTab === "rules" && (
+            <PredictionMarketRulesView
+              detailWidth={detailTextWidth}
+              rules={detail?.rules ?? []}
+            />
+          )}
+        </ScrollBox>
+      ) : null}
+
+      {detailTab === "book" && (
+        detail ? (
           <PredictionMarketBookView
             detail={detail}
+            focused={focused}
             onPreviewOrder={onPreviewOrder}
+            width={detailWidth}
           />
-        )}
-
-        {detailTab === "trades" && (
-          <PredictionMarketTradesView trades={detail?.trades ?? []} />
-        )}
+        ) : (
+          <Box flexGrow={1} justifyContent="center">
+            <EmptyState
+              title={detailLoading ? "Loading order book." : "No order book."}
+              hint="This venue did not return current order book depth."
+            />
+          </Box>
+        )
+      )}
 
-        {detailTab === "rules" && (
-          <PredictionMarketRulesView
-            detailWidth={detailTextWidth}
-            rules={detail?.rules ?? []}
-          />
-        )}
-      </ScrollBox>
+      {detailTab === "trades" && (
+        <PredictionMarketTradesView
+          focused={focused}
+          trades={detail?.trades ?? []}
+          width={detailWidth}
+        />
+      )}
     </>
   );
 }

package/src/plugins/prediction-markets/detail/shared.tsx

@@ -1,6 +1,11 @@
 import { Box } from "../../../ui";
 import { colors } from "../../../theme/colors";
 import { ExternalLinkText } from "../../../components/ui/external-link";
+import type {
+  PredictionListRow,
+  PredictionMarketDetail,
+  PredictionMarketSummary,
+} from "../types";
 
 export function truncatePredictionText(
   value: string,
@@ -11,6 +16,20 @@ export function truncatePredictionText(
   return `${value.slice(0, maxLength - 3)}...`;
 }
 
+export function resolvePredictionDetailTitle({
+  detail,
+  selectedRow,
+  selectedSummary,
+}: {
+  detail: PredictionMarketDetail | null;
+  selectedRow: PredictionListRow | null;
+  selectedSummary: PredictionMarketSummary | null;
+}): string | undefined {
+  if (!selectedSummary) return undefined;
+  const summary = detail?.summary ?? selectedSummary;
+  return selectedRow?.kind === "group" ? selectedRow.title : summary.title;
+}
+
 export function SummaryLink({
   url,
   maxLength,

package/src/plugins/prediction-markets/detail/trades.tsx

@@ -1,31 +1,76 @@
-import { Box, Text } from "../../../ui";
+import { DataTableView, type DataTableColumn } from "../../../components";
 import { colors } from "../../../theme/colors";
-import { formatNumber, padTo } from "../../../utils/format";
+import { formatNumber } from "../../../utils/format";
 import { formatPredictionProbability } from "../metrics";
 import type { PredictionTrade } from "../types";
 
+type TradeColumnId = "time" | "side" | "outcome" | "price" | "size";
+type TradeColumn = DataTableColumn & { id: TradeColumnId };
+
+const TRADE_COLUMNS: TradeColumn[] = [
+  { id: "time", label: "TIME", width: 16 },
+  { id: "side", label: "SIDE", width: 6 },
+  { id: "outcome", label: "OUT", width: 4 },
+  { id: "price", label: "PRICE", width: 8, align: "right" },
+  { id: "size", label: "SIZE", width: 10, align: "right" },
+];
+
 export function PredictionMarketTradesView({
+  focused,
   trades,
+  width,
 }: {
+  focused: boolean;
   trades: PredictionTrade[];
+  width: number;
 }) {
   return (
-    <Box flexDirection="column">
-      <Box height={1}>
-        <Text
-          fg={colors.textDim}
-        >{`${padTo("TIME", 16)} ${padTo("SIDE", 6)} ${padTo("OUT", 4)} ${padTo("PRICE", 8)} ${padTo("SIZE", 10)}`}</Text>
-      </Box>
-      {trades.slice(0, 30).map((trade) => (
-        <Box key={trade.id} height={1}>
-          <Text fg={trade.side === "buy" ? colors.positive : colors.negative}>
-            {`${padTo(new Date(trade.timestamp).toLocaleTimeString("en-US", { hour12: false }), 16)} ${padTo(trade.side.toUpperCase(), 6)} ${padTo(trade.outcome.toUpperCase(), 4)} ${padTo(formatPredictionProbability(trade.price), 8)} ${padTo(formatNumber(trade.size, 0), 10, "right")}`}
-          </Text>
-        </Box>
-      ))}
-      {trades.length === 0 && (
-        <Text fg={colors.textDim}>No recent trades.</Text>
-      )}
-    </Box>
+    <DataTableView<PredictionTrade, TradeColumn>
+      focused={focused}
+      keyboardNavigation={false}
+      rootWidth={width}
+      rootBackgroundColor={colors.panel}
+      selection={{ kind: "none" }}
+      columns={TRADE_COLUMNS}
+      items={trades.slice(0, 30)}
+      sortColumnId={null}
+      sortDirection="asc"
+      onHeaderClick={() => {}}
+      getItemKey={(trade) => trade.id}
+      renderCell={(trade, column) => {
+        const tradeColor = trade.side === "buy" ? colors.positive : colors.negative;
+        switch (column.id) {
+          case "time":
+            return {
+              text: new Date(trade.timestamp).toLocaleTimeString("en-US", {
+                hour12: false,
+              }),
+              color: colors.textDim,
+            };
+          case "side":
+            return {
+              text: trade.side.toUpperCase(),
+              color: tradeColor,
+            };
+          case "outcome":
+            return {
+              text: trade.outcome.toUpperCase(),
+              color: colors.text,
+            };
+          case "price":
+            return {
+              text: formatPredictionProbability(trade.price),
+              color: tradeColor,
+            };
+          case "size":
+            return {
+              text: formatNumber(trade.size, 0),
+              color: colors.textDim,
+            };
+        }
+      }}
+      emptyStateTitle="No recent trades."
+      emptyStateHint="This venue did not return recent prints."
+    />
   );
 }

package/src/plugins/prediction-markets/detail.test.tsx

@@ -48,4 +48,54 @@ describe("prediction markets detail views", () => {
     expect(frame).not.toContain("Kalshi");
     expect(frame).not.toContain("targets");
   });
+
+  test("keeps grouped outcomes in place while selected detail is loading", async () => {
+    testSetup = await testRender(<GroupedDetailHarness loading />, {
+      width: 64,
+      height: 24,
+    });
+    await flushFrames(testSetup);
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Outcomes");
+    expect(frame).toContain("Above 4.25%");
+    expect(frame).toContain("Loading chart...");
+    expect(frame).not.toContain("No chart history.");
+    expect(frame).not.toContain("Loading market detail...");
+  });
+
+  test("renders book levels in the shared data table", async () => {
+    testSetup = await testRender(<GroupedDetailHarness detailTab="book" />, {
+      width: 64,
+      height: 24,
+    });
+    await flushFrames(testSetup);
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("OUT");
+    expect(frame).toContain("SIDE");
+    expect(frame).toContain("PRICE");
+    expect(frame).toContain("SIZE");
+    expect(frame).toContain("YES");
+    expect(frame).toContain("BID");
+    expect(frame).toContain("47c");
+  });
+
+  test("renders recent trades in the shared data table", async () => {
+    testSetup = await testRender(<GroupedDetailHarness detailTab="trades" />, {
+      width: 64,
+      height: 24,
+    });
+    await flushFrames(testSetup);
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("TIME");
+    expect(frame).toContain("SIDE");
+    expect(frame).toContain("OUT");
+    expect(frame).toContain("PRICE");
+    expect(frame).toContain("SIZE");
+    expect(frame).toContain("BUY");
+    expect(frame).toContain("YES");
+    expect(frame).toContain("48c");
+  });
 });

package/src/plugins/prediction-markets/pane.test.tsx

@@ -130,6 +130,32 @@ describe("prediction markets pane interactions", () => {
     expect(frame).not.toContain("Was there a typo in the url or port?");
   });
 
+  test("shows loading instead of an empty state while empty catalogs are pending", async () => {
+    attachPredictionMarketsPersistence(new MemoryPersistence());
+
+    const releaseFetches: Array<() => void> = [];
+    globalThis.fetch = (async (input: Request | string | URL) => {
+      await new Promise<void>((resolve) => {
+        releaseFetches.push(resolve);
+      });
+      const url = String(input);
+      if (url.includes("/trade-api/v2/events?")) {
+        return new Response(JSON.stringify({ events: [] }), { status: 200 });
+      }
+      return new Response(JSON.stringify([]), { status: 200 });
+    }) as unknown as typeof fetch;
+
+    testSetup = await testRender(<Harness />, { width: 120, height: 34 });
+    await flushFrames(testSetup);
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Loading markets...");
+    expect(frame).not.toContain("No markets matched.");
+
+    for (const release of releaseFetches) release();
+    await flushFrames(testSetup);
+  });
+
   test("selects a market on single click and opens detail on double click", async () => {
     installPredictionMarketMocks();
 
@@ -172,6 +198,23 @@ describe("prediction markets pane interactions", () => {
 
     frame = testSetup.captureCharFrame();
     expect(frame).toContain("Kalshi primary rule");
+    expect(frame).toContain("\u2190 Back Will the Fed cut rates?");
+    expect(frame.match(/Will the Fed cut rates\?/g) ?? []).toHaveLength(1);
+    expect(frame).not.toContain("[/]search");
+    expect(frame).not.toContain("[w]atch");
+    expect(frame).not.toContain("[1-4]browse");
+
+    const metricsHeader = frame
+      .split("\n")
+      .find((line) =>
+        line.includes("YES") &&
+        line.includes("NO") &&
+        line.includes("24H VOL"),
+      );
+    expect(metricsHeader).toContain("TOTAL VOL");
+    expect(metricsHeader).toContain("OI");
+    expect(metricsHeader).toContain("SPREAD");
+    expect(metricsHeader).toContain("LAST");
   });
 
   test("focuses the pane when a market row is clicked", async () => {
@@ -265,6 +308,38 @@ describe("prediction markets pane interactions", () => {
     expect(frame).not.toContain("\u2190 Back");
   });
 
+  test("moves focus between search and the market table with arrows", async () => {
+    installPredictionMarketMocks();
+
+    testSetup = await testRender(<Harness />, { width: 120, height: 34 });
+    await flushFrames(testSetup);
+
+    await emitKeypress(testSetup, { name: "j", sequence: "j" });
+    await flushFrames(testSetup, 1);
+
+    await emitKeypress(testSetup, { name: "up", sequence: "\u001b[A" });
+    await flushFrames(testSetup);
+
+    let frame = testSetup.captureCharFrame();
+    expect(frame).toContain("/ search markets");
+
+    await emitKeypress(testSetup, { name: "up", sequence: "\u001b[A" });
+    await flushFrames(testSetup);
+
+    frame = testSetup.captureCharFrame();
+    expect(frame).toContain("? search markets");
+
+    await emitKeypress(testSetup, {
+      name: "down",
+      sequence: "\u001b[B",
+      targetEditable: true,
+    });
+    await flushFrames(testSetup);
+
+    frame = testSetup.captureCharFrame();
+    expect(frame).toContain("/ search markets");
+  });
+
   test("supports detail outcome navigation and escape return from the keyboard", async () => {
     attachPredictionMarketsPersistence(new MemoryPersistence());
 

package/src/plugins/prediction-markets/pane.tsx

@@ -1,14 +1,23 @@
 import { Box, Input, Text } from "../../ui";
 import { useCallback, useMemo, useRef } from "react";
-import { DataTableStackView, Tabs, usePaneFooter } from "../../components";
+import {
+  DataTableStackView,
+  Spinner,
+  Tabs,
+  usePaneFooter,
+  type DataTableKeyEvent,
+  type DataTableRootKeyContext,
+} from "../../components";
 import { createRowValueCache } from "../../components/ui/row-value-cache";
 import type { PaneProps } from "../../types/plugin";
 import { colors } from "../../theme/colors";
 import { PREDICTION_CATEGORY_OPTIONS } from "./categories";
 import { usePredictionMarketsController } from "./controller";
 import { PredictionMarketDetailPane } from "./detail/pane";
+import { resolvePredictionDetailTitle } from "./detail/shared";
 import { getPredictionColumnValue } from "./metrics";
 import { BROWSE_TABS, VENUE_TABS } from "./navigation";
+import { isPlainArrowUp, stopSearchFocusNavigation } from "../../utils/search-focus-navigation";
 import type {
   PredictionBrowseTab,
   PredictionCategoryId,
@@ -66,33 +75,45 @@ export function PredictionMarketsPane({ focused, width, height }: PaneProps) {
     controller.catalogStatus?.tone === "danger"
       ? colors.negative
       : colors.borderFocused;
-  usePaneFooter("prediction-markets", () => ({
-    info: [
-      ...(controller.searchQuery.trim() ? [{ id: "search", parts: [{ text: `search: ${controller.searchQuery.trim()}`, tone: "value" as const }] }] : []),
-      ...(controller.searchLoading ? [{ id: "search-loading", parts: [{ text: "searching", tone: "muted" as const }] }] : []),
-      ...(controller.catalogStatus ? [{
-        id: "catalog",
-        parts: [{ text: controller.catalogStatus.message, tone: controller.catalogStatus.tone === "danger" ? "warning" as const : "muted" as const, color: catalogStatusColor }],
-      }] : []),
-    ],
-    hints: [
-      { id: "search", key: "/", label: "search", onPress: controller.actions.focusSearch },
-      { id: "watch", key: "w", label: "atch", onPress: controller.selectedRow ? () => controller.actions.toggleWatchlist(controller.selectedRow!) : undefined, disabled: !controller.selectedRow },
-      {
-        id: "browse",
-        key: "1-4",
-        label: "browse",
-        onPress: () => {
-          const index = BROWSE_TABS.findIndex((tab) => tab.value === controller.browseTab);
-          controller.actions.selectBrowseTab(BROWSE_TABS[(index + 1) % BROWSE_TABS.length]!.value as PredictionBrowseTab);
+  const rowsLoading =
+    controller.visibleRows.length === 0 &&
+    (controller.catalogLoadCount > 0 || controller.searchLoading);
+  const detailTitle = resolvePredictionDetailTitle({
+    detail: controller.detail,
+    selectedRow: controller.selectedRow,
+    selectedSummary: controller.selectedSummary,
+  });
+  usePaneFooter("prediction-markets", () => {
+    if (controller.detailOpen) return null;
+    return {
+      info: [
+        ...(controller.searchQuery.trim() ? [{ id: "search", parts: [{ text: `search: ${controller.searchQuery.trim()}`, tone: "value" as const }] }] : []),
+        ...(controller.searchLoading ? [{ id: "search-loading", parts: [{ text: "searching", tone: "muted" as const }] }] : []),
+        ...(controller.catalogStatus ? [{
+          id: "catalog",
+          parts: [{ text: controller.catalogStatus.message, tone: controller.catalogStatus.tone === "danger" ? "warning" as const : "muted" as const, color: catalogStatusColor }],
+        }] : []),
+      ],
+      hints: [
+        { id: "search", key: "/", label: "search", onPress: controller.actions.focusSearch },
+        { id: "watch", key: "w", label: "atch", onPress: controller.selectedRow ? () => controller.actions.toggleWatchlist(controller.selectedRow!) : undefined, disabled: !controller.selectedRow },
+        {
+          id: "browse",
+          key: "1-4",
+          label: "browse",
+          onPress: () => {
+            const index = BROWSE_TABS.findIndex((tab) => tab.value === controller.browseTab);
+            controller.actions.selectBrowseTab(BROWSE_TABS[(index + 1) % BROWSE_TABS.length]!.value as PredictionBrowseTab);
+          },
         },
-      },
-    ],
-  }), [
+      ],
+    };
+  }, [
     catalogStatusColor,
     controller.browseTab,
     controller.catalogStatus?.message,
     controller.catalogStatus?.tone,
+    controller.detailOpen,
     controller.searchLoading,
     controller.searchQuery,
     controller.selectedRow,
@@ -217,6 +238,18 @@ export function PredictionMarketsPane({ focused, width, height }: PaneProps) {
     watchlistedRowKeys,
   ]);
 
+  const handleRootKeyDown = useCallback((
+    event: DataTableKeyEvent,
+    context: DataTableRootKeyContext,
+  ) => {
+    if (context.selectedIndex <= 0 && isPlainArrowUp(event)) {
+      stopSearchFocusNavigation(event);
+      controller.actions.focusSearch();
+      return true;
+    }
+    return false;
+  }, [controller.actions.focusSearch]);
+
   const detailContent =
     controller.selectedSummary && controller.selectedRow ? (
       <Box
@@ -256,6 +289,7 @@ export function PredictionMarketsPane({ focused, width, height }: PaneProps) {
       detailOpen={controller.detailOpen && !!controller.selectedSummary}
       onBack={controller.actions.closeDetail}
       detailContent={detailContent}
+      detailTitle={detailTitle}
       rootBefore={browseControls}
       rootWidth={width}
       rootHeight={height}
@@ -271,6 +305,7 @@ export function PredictionMarketsPane({ focused, width, height }: PaneProps) {
       }}
       onActivate={(row) =>
         controller.actions.openSelectedRow(row.key)}
+      onRootKeyDown={handleRootKeyDown}
       columns={controller.visibleColumns}
       items={controller.visibleRows}
       sortColumnId={controller.sortPreference.columnId}
@@ -281,6 +316,19 @@ export function PredictionMarketsPane({ focused, width, height }: PaneProps) {
       getItemKey={(row) => row.key}
       virtualize
       renderCell={renderCell}
+      emptyContent={
+        rowsLoading ? (
+          <Box width="100%" paddingX={1} paddingY={1}>
+            <Spinner
+              label={
+                controller.searchQuery.trim().length > 0
+                  ? "Searching markets..."
+                  : "Loading markets..."
+              }
+            />
+          </Box>
+        ) : undefined
+      }
       emptyStateTitle="No markets matched."
       emptyStateHint="Change the venue, browse tab, or search query."
     />