From cf4ff65afbf6e3f979b8554f043f3a5de68217ba Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Wed, 1 Jul 2026 23:31:02 +0530
Subject: [PATCH 1/4] add config for default sort

---
 .../pivot/CanvasPivotDisplay.svelte           |  10 +-
 .../canvas/components/pivot/default-sort.ts   | 167 ++++++++++++++++++
 .../features/canvas/components/pivot/index.ts |  42 ++++-
 .../canvas/inspector/DefaultSortInput.svelte  |  87 +++++++++
 .../canvas/inspector/ParamMapper.svelte       |   5 +
 .../src/features/canvas/inspector/types.ts    |   3 +-
 6 files changed, 303 insertions(+), 11 deletions(-)
 create mode 100644 web-common/src/features/canvas/components/pivot/default-sort.ts
 create mode 100644 web-common/src/features/canvas/inspector/DefaultSortInput.svelte

diff --git a/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte b/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte
index 4b33042a9542..c11947c8dfa0 100644
--- a/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte
+++ b/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { PivotCanvasComponent } from "@rilldata/web-common/features/canvas/components/pivot";
+  import type { SortingState } from "tanstack-table-8-svelte-5";
   import ComponentHeader from "../../ComponentHeader.svelte";
   import CanvasPivotRenderer from "./CanvasPivotRenderer.svelte";
   import { validateTableSchema } from "./selector";
@@ -40,11 +41,16 @@
   $: schema = validateTableSchema(metricsViewSpec, tableSpec);
   $: widthScopeKey = `canvas:${component.parent.name}:${component.id}`;
 
+  let defaultSorting: SortingState;
+  $: defaultSorting = tableSpec.default_sort
+    ? [{ id: tableSpec.default_sort.id, desc: tableSpec.default_sort.desc }]
+    : [];
+
   $: if ("columns" in tableSpec && schema.isValid) {
     const columns = tableSpec?.columns || [];
     pivotState.update((state) => ({
       ...state,
-      sorting: [],
+      sorting: defaultSorting,
       expanded: {},
       activeCell: null,
       columnPage: 1,
@@ -59,7 +65,7 @@
     const rowDimensions = tableSpec.row_dimensions || [];
     pivotState.update((state) => ({
       ...state,
-      sorting: [],
+      sorting: defaultSorting,
       expanded: {},
       activeCell: null,
       columnPage: 1,
diff --git a/web-common/src/features/canvas/components/pivot/default-sort.ts b/web-common/src/features/canvas/components/pivot/default-sort.ts
new file mode 100644
index 000000000000..e9723d21080a
--- /dev/null
+++ b/web-common/src/features/canvas/components/pivot/default-sort.ts
@@ -0,0 +1,167 @@
+import {
+  COMPARISON_DELTA,
+  COMPARISON_PERCENT,
+  COMPARISON_VALUE,
+  type PivotDataStoreConfig,
+} from "@rilldata/web-common/features/dashboards/pivot/types";
+import {
+  extractNumbers,
+  getTimeGrainFromDimension,
+  isTimeDimension,
+} from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
+import { TIME_GRAIN } from "@rilldata/web-common/lib/time/config";
+import type { DefaultSort } from "./index";
+
+/** Separator between column-dimension values in a nested-sort label. */
+const LABEL_SEPARATOR = " › ";
+
+/** Matches a nested pivot leaf accessor, e.g. "c0v2_c1v0m0" or "c0v2m0". */
+const NESTED_ACCESSOR_RE = /^(c\d+v\d+_?)+m\d+$/;
+
+/**
+ * Builds the human-readable label for a sort id. For stable ids (measure,
+ * dimension, time grain) this resolves the display name from the metrics view.
+ * For nested pivot leaf accessors it decodes the column-dimension value path
+ * and joins it with the measure display name, e.g. "US › 2024 › Sales".
+ *
+ * Returns the raw id as a fallback when nothing better can be resolved.
+ */
+export function getSortLabel(
+  id: string,
+  config: PivotDataStoreConfig,
+  columnDimensionAxes: Record<string, string[]> = {},
+): string {
+  if (NESTED_ACCESSOR_RE.test(id)) {
+    return getNestedAccessorLabel(id, config, columnDimensionAxes);
+  }
+  return getFieldLabel(id, config);
+}
+
+export type SortFieldType = "measure" | "dimension" | "time";
+
+export interface SortChip {
+  label: string;
+  type: SortFieldType;
+}
+
+/**
+ * Breaks a sort id into the chips shown in the inspector. A stable field is a
+ * single chip; a nested pivot leaf accessor becomes one chip per column-
+ * dimension value followed by the measure chip, e.g. [US, 2024, Sales].
+ */
+export function getSortChips(
+  id: string,
+  config: PivotDataStoreConfig,
+  columnDimensionAxes: Record<string, string[]> = {},
+): SortChip[] {
+  if (NESTED_ACCESSOR_RE.test(id)) {
+    const [colPart, measureIndexPart] = id.split("m");
+    const parts = colPart.split("_").filter(Boolean);
+
+    const chips: SortChip[] = parts.map((part) => {
+      const { c, v } = extractNumbers(part);
+      const dimensionName = config.colDimensionNames[c];
+      return {
+        label: columnDimensionAxes[dimensionName]?.[v] ?? "",
+        type: isTimeDimension(dimensionName, config.time.timeDimension)
+          ? "time"
+          : "dimension",
+      };
+    });
+
+    const measureName = config.measureNames[parseInt(measureIndexPart)];
+    if (measureName) {
+      chips.push({
+        label: getFieldLabel(measureName, config),
+        type: "measure",
+      });
+    }
+    return chips;
+  }
+
+  return [
+    { label: getFieldLabel(id, config), type: getSortFieldType(id, config) },
+  ];
+}
+
+/**
+ * Resolves the field type of a sort id, used to color the inspector chip.
+ * A nested pivot leaf accessor sorts by its measure, so it reads as "measure".
+ */
+export function getSortFieldType(
+  id: string,
+  config: PivotDataStoreConfig,
+): SortFieldType {
+  if (NESTED_ACCESSOR_RE.test(id)) return "measure";
+  if (isTimeDimension(id, config.time.timeDimension)) return "time";
+  if (config.allMeasures.some((m) => m.name === id)) return "measure";
+  return "dimension";
+}
+
+/** Human-readable suffix appended to a base measure for comparison columns. */
+const COMPARISON_MODIFIER: Record<string, string> = {
+  [COMPARISON_VALUE]: " (previous)",
+  [COMPARISON_DELTA]: " Δ",
+  [COMPARISON_PERCENT]: " Δ %",
+};
+
+function getFieldLabel(field: string, config: PivotDataStoreConfig): string {
+  if (isTimeDimension(field, config.time.timeDimension)) {
+    const grain = getTimeGrainFromDimension(field);
+    return `Time ${TIME_GRAIN[grain]?.label ?? grain}`;
+  }
+
+  // Comparison columns are the base measure plus a suffix (e.g. "sales__delta_rel").
+  for (const [suffix, modifier] of Object.entries(COMPARISON_MODIFIER)) {
+    if (field.endsWith(suffix)) {
+      const baseName = field.slice(0, -suffix.length);
+      return getFieldLabel(baseName, config) + modifier;
+    }
+  }
+
+  const measure = config.allMeasures.find((m) => m.name === field);
+  if (measure) return measure.displayName || (measure.name as string);
+
+  const dimension = config.allDimensions.find(
+    (d) => (d.name || d.column) === field,
+  );
+  if (dimension) {
+    return (
+      dimension.displayName || dimension.name || (dimension.column as string)
+    );
+  }
+
+  return field;
+}
+
+function getNestedAccessorLabel(
+  accessor: string,
+  config: PivotDataStoreConfig,
+  columnDimensionAxes: Record<string, string[]>,
+): string {
+  const [colPart, measureIndexPart] = accessor.split("m");
+  const parts = colPart.split("_").filter(Boolean);
+
+  const valueLabels = parts.map((part) => {
+    const { c, v } = extractNumbers(part);
+    const dimensionName = config.colDimensionNames[c];
+    return columnDimensionAxes[dimensionName]?.[v] ?? "";
+  });
+
+  const measureName = config.measureNames[parseInt(measureIndexPart)];
+  const measureLabel = measureName ? getFieldLabel(measureName, config) : "";
+
+  return [...valueLabels, measureLabel].filter(Boolean).join(LABEL_SEPARATOR);
+}
+
+/**
+ * Whether two sort configs target the same column and direction. Used to
+ * disable the "Make default" button when the active sort already is the default.
+ */
+export function sortEquals(
+  a: DefaultSort | undefined,
+  b: { id: string; desc: boolean } | undefined,
+): boolean {
+  if (!a || !b) return false;
+  return a.id === b.id && a.desc === b.desc;
+}
diff --git a/web-common/src/features/canvas/components/pivot/index.ts b/web-common/src/features/canvas/components/pivot/index.ts
index 0c9930b37700..9f6cab66e078 100644
--- a/web-common/src/features/canvas/components/pivot/index.ts
+++ b/web-common/src/features/canvas/components/pivot/index.ts
@@ -25,6 +25,18 @@ import type {
 import CanvasPivotDisplay from "./CanvasPivotDisplay.svelte";
 import { createPivotConfig, usePivotForCanvas } from "./util";
 
+/**
+ * Default sort applied when the table first loads. Mirrors how explore
+ * persists pivot sort: `id` is the raw TanStack sort id (measure, dimension,
+ * time grain, or nested leaf accessor), decoded at query time. `label` is
+ * stored purely for human-readable display in the inspector.
+ */
+export interface DefaultSort {
+  id: string;
+  desc: boolean;
+  label: string;
+}
+
 export interface PivotSpec
   extends ComponentCommonProperties,
     ComponentFilterProperties {
@@ -34,6 +46,7 @@ export interface PivotSpec
   col_dimensions?: string[];
   hide_totals_row?: boolean;
   hide_totals_col?: boolean;
+  default_sort?: DefaultSort;
 }
 
 export interface TableSpec
@@ -43,6 +56,7 @@ export interface TableSpec
   columns: string[];
   hide_totals_row?: boolean;
   hide_totals_col?: boolean;
+  default_sort?: DefaultSort;
 }
 
 export { default as Pivot } from "./CanvasPivotDisplay.svelte";
@@ -186,6 +200,7 @@ export class PivotCanvasComponent extends BaseCanvasComponent<
             meta: { defaultValue: false },
             showInUI: canShowTotalRow,
           },
+          default_sort: { type: "default_sort", label: "Default sort" },
           ...commonOptions,
         },
         filter: getFilterOptions(true, false),
@@ -216,6 +231,7 @@ export class PivotCanvasComponent extends BaseCanvasComponent<
             meta: { defaultValue: false },
             showInUI: canShowTotalRow,
           },
+          default_sort: { type: "default_sort", label: "Default sort" },
           ...commonOptions,
         },
         filter: getFilterOptions(true, false),
@@ -275,16 +291,26 @@ export class PivotCanvasComponent extends BaseCanvasComponent<
 
     let newSpec: PivotSpec | TableSpec;
 
+    // A nested leaf accessor (e.g. "c0v2m0") is meaningless in the other table
+    // mode, so drop the default sort unless it targets a stable field.
+    const defaultSort =
+      currentSpec.default_sort &&
+      /^(c\d+v\d+_?)+m\d+$/.test(currentSpec.default_sort.id)
+        ? undefined
+        : currentSpec.default_sort;
+
     const commonProperties: ComponentCommonProperties &
       ComponentFilterProperties &
-      Pick<PivotSpec, "hide_totals_row" | "hide_totals_col"> = {
-      title: currentSpec.title,
-      description: currentSpec.description,
-      dimension_filters: currentSpec.dimension_filters,
-      time_filters: currentSpec.time_filters,
-      hide_totals_row: currentSpec.hide_totals_row,
-      hide_totals_col: currentSpec.hide_totals_col,
-    };
+      Pick<PivotSpec, "hide_totals_row" | "hide_totals_col" | "default_sort"> =
+      {
+        title: currentSpec.title,
+        description: currentSpec.description,
+        dimension_filters: currentSpec.dimension_filters,
+        time_filters: currentSpec.time_filters,
+        hide_totals_row: currentSpec.hide_totals_row,
+        hide_totals_col: currentSpec.hide_totals_col,
+        default_sort: defaultSort,
+      };
 
     if ("columns" in currentSpec) {
       const row_dimensions =
diff --git a/web-common/src/features/canvas/inspector/DefaultSortInput.svelte b/web-common/src/features/canvas/inspector/DefaultSortInput.svelte
new file mode 100644
index 000000000000..29731754c6cc
--- /dev/null
+++ b/web-common/src/features/canvas/inspector/DefaultSortInput.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+  import Button from "@rilldata/web-common/components/button/Button.svelte";
+  import { Chip } from "@rilldata/web-common/components/chip";
+  import InputLabel from "@rilldata/web-common/components/forms/InputLabel.svelte";
+  import ArrowDown from "@rilldata/web-common/components/icons/ArrowDown.svelte";
+  import ChevronRight from "@rilldata/web-common/components/icons/ChevronRight.svelte";
+  import type { PivotCanvasComponent } from "../components/pivot";
+  import {
+    getSortChips,
+    getSortLabel,
+    sortEquals,
+  } from "../components/pivot/default-sort";
+
+  export let component: PivotCanvasComponent;
+  export let label: string;
+
+  $: ({ pivotState, config, pivotDataStore, specStore } = component);
+
+  // The user's current interactive sort on the table (raw TanStack sort id).
+  $: activeSort = $pivotState.sorting[0];
+
+  $: storedDefault =
+    "default_sort" in $specStore ? $specStore.default_sort : undefined;
+
+  $: columnDimensionAxes = $pivotDataStore?.columnDimensionAxes ?? {};
+
+  // Show the active sort while the user is sorting; otherwise the stored default.
+  $: shownSort = activeSort ?? storedDefault;
+
+  $: chips = shownSort
+    ? getSortChips(shownSort.id, $config, columnDimensionAxes)
+    : [];
+
+  $: canMakeDefault = !!activeSort && !sortEquals(storedDefault, activeSort);
+
+  function makeDefault() {
+    if (!activeSort) return;
+    component.updateProperty("default_sort", {
+      id: activeSort.id,
+      desc: activeSort.desc,
+      label: getSortLabel(activeSort.id, $config, columnDimensionAxes),
+    });
+  }
+
+  function clearDefault() {
+    component.updateProperty("default_sort", undefined);
+  }
+</script>
+
+<div class="flex flex-col gap-y-2 py-1">
+  <InputLabel small {label} id="default_sort" />
+
+  {#if shownSort}
+    <div class="flex items-center gap-1 flex-wrap">
+      {#each chips as chip, i (i)}
+        {#if i > 0}
+          <span class="text-fg-disabled shrink-0">
+            <ChevronRight size="12px" />
+          </span>
+        {/if}
+        <Chip readOnly compact type={chip.type} label={chip.label}>
+          <span class="font-bold truncate" slot="body">{chip.label}</span>
+        </Chip>
+      {/each}
+      <span
+        class="ml-0.5 text-fg-secondary transition-transform"
+        class:-rotate-180={!shownSort.desc}
+        title={shownSort.desc ? "Descending" : "Ascending"}
+      >
+        <ArrowDown size="14px" />
+      </span>
+    </div>
+
+    <div class="flex items-center justify-between">
+      <Button type="text" disabled={!canMakeDefault} onclick={makeDefault}>
+        Set default
+      </Button>
+      {#if storedDefault}
+        <Button type="text" onclick={clearDefault}>Clear</Button>
+      {/if}
+    </div>
+  {:else}
+    <span class="text-xs text-fg-disabled">
+      Sort a column on the table to set it as the default.
+    </span>
+  {/if}
+</div>
diff --git a/web-common/src/features/canvas/inspector/ParamMapper.svelte b/web-common/src/features/canvas/inspector/ParamMapper.svelte
index 31a050177106..3890c4160509 100644
--- a/web-common/src/features/canvas/inspector/ParamMapper.svelte
+++ b/web-common/src/features/canvas/inspector/ParamMapper.svelte
@@ -17,6 +17,7 @@
   import MetricsSQLInput from "./chart/MetricsSQLInput.svelte";
   import PositionalFieldConfig from "./chart/PositionalFieldConfig.svelte";
   import ComparisonInput from "./ComparisonInput.svelte";
+  import DefaultSortInput from "./DefaultSortInput.svelte";
   import MultiFieldInput from "./fields/MultiFieldInput.svelte";
   import SingleFieldInput from "./fields/SingleFieldInput.svelte";
   import LabelsInput from "./LabelsInput.svelte";
@@ -235,6 +236,10 @@
             }}
           />
 
+          <!-- DEFAULT SORT (table / pivot) -->
+        {:else if config.type === "default_sort" && component instanceof PivotCanvasComponent}
+          <DefaultSortInput {component} label={config.label ?? key} />
+
           <!-- SWITCHER TABS -->
         {:else if config.type === "switcher_tab"}
           <CanvasFieldSwitcher
diff --git a/web-common/src/features/canvas/inspector/types.ts b/web-common/src/features/canvas/inspector/types.ts
index 4b57ea5d6c99..021c4dc46a5a 100644
--- a/web-common/src/features/canvas/inspector/types.ts
+++ b/web-common/src/features/canvas/inspector/types.ts
@@ -19,7 +19,8 @@ type CustomInputTypes =
   | "vega_spec"
   | "switcher_tab"
   | "ai_generate"
-  | "labels";
+  | "labels"
+  | "default_sort";
 type PositionalInputTypes = "alignment";
 
 export type InputType =

From 8175cb460f4aa13a6eca8eb06212eeeb2b093724 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Sun, 5 Jul 2026 12:34:12 +0530
Subject: [PATCH 2/4] handle time and async labels

---
 .../canvas/components/pivot/default-sort.ts   | 59 ++++++++++++++++---
 .../canvas/inspector/DefaultSortInput.svelte  | 50 ++++++++++------
 2 files changed, 81 insertions(+), 28 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/default-sort.ts b/web-common/src/features/canvas/components/pivot/default-sort.ts
index e9723d21080a..8135a1d8caa0 100644
--- a/web-common/src/features/canvas/components/pivot/default-sort.ts
+++ b/web-common/src/features/canvas/components/pivot/default-sort.ts
@@ -1,15 +1,17 @@
+import {
+  extractNumbers,
+  getTimeGrainFromDimension,
+  isTimeDimension,
+} from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
 import {
   COMPARISON_DELTA,
   COMPARISON_PERCENT,
   COMPARISON_VALUE,
   type PivotDataStoreConfig,
 } from "@rilldata/web-common/features/dashboards/pivot/types";
-import {
-  extractNumbers,
-  getTimeGrainFromDimension,
-  isTimeDimension,
-} from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
 import { TIME_GRAIN } from "@rilldata/web-common/lib/time/config";
+import { convertISOStringToJSDateWithSameTimeAsSelectedTimeZone } from "@rilldata/web-common/lib/time/timezone";
+import { timeFormat } from "d3-time-format";
 import type { DefaultSort } from "./index";
 
 /** Separator between column-dimension values in a nested-sort label. */
@@ -61,11 +63,13 @@ export function getSortChips(
     const chips: SortChip[] = parts.map((part) => {
       const { c, v } = extractNumbers(part);
       const dimensionName = config.colDimensionNames[c];
+      const value = columnDimensionAxes[dimensionName]?.[v] ?? "";
+      const isTime = isTimeDimension(dimensionName, config.time.timeDimension);
       return {
-        label: columnDimensionAxes[dimensionName]?.[v] ?? "",
-        type: isTimeDimension(dimensionName, config.time.timeDimension)
-          ? "time"
-          : "dimension",
+        label: isTime
+          ? formatColumnTimeValue(value, dimensionName, config)
+          : value,
+        type: isTime ? "time" : "dimension",
       };
     });
 
@@ -84,6 +88,29 @@ export function getSortChips(
   ];
 }
 
+/**
+ * Whether all chip values for a sort id can be resolved from the currently
+ * loaded data. Nested pivot leaf accessors reference column-dimension values
+ * that arrive asynchronously; until they load, chips would render blank or,
+ * for time dimensions, as "NaN". Stable fields resolve synchronously.
+ */
+export function areSortChipsReady(
+  id: string,
+  config: PivotDataStoreConfig,
+  columnDimensionAxes: Record<string, string[]> = {},
+): boolean {
+  if (!NESTED_ACCESSOR_RE.test(id)) return true;
+
+  const [colPart] = id.split("m");
+  const parts = colPart.split("_").filter(Boolean);
+
+  return parts.every((part) => {
+    const { c, v } = extractNumbers(part);
+    const dimensionName = config.colDimensionNames[c];
+    return columnDimensionAxes[dimensionName]?.[v] != null;
+  });
+}
+
 /**
  * Resolves the field type of a sort id, used to color the inspector chip.
  * A nested pivot leaf accessor sorts by its measure, so it reads as "measure".
@@ -105,6 +132,20 @@ const COMPARISON_MODIFIER: Record<string, string> = {
   [COMPARISON_PERCENT]: " Δ %",
 };
 
+function formatColumnTimeValue(
+  value: string,
+  dimensionName: string,
+  config: PivotDataStoreConfig,
+): string {
+  const grain = getTimeGrainFromDimension(dimensionName);
+  const dt = convertISOStringToJSDateWithSameTimeAsSelectedTimeZone(
+    value,
+    config.time.timeZone || "UTC",
+  );
+  const formatter = timeFormat(grain ? TIME_GRAIN[grain].d3format : "%H:%M");
+  return formatter(dt);
+}
+
 function getFieldLabel(field: string, config: PivotDataStoreConfig): string {
   if (isTimeDimension(field, config.time.timeDimension)) {
     const grain = getTimeGrainFromDimension(field);
diff --git a/web-common/src/features/canvas/inspector/DefaultSortInput.svelte b/web-common/src/features/canvas/inspector/DefaultSortInput.svelte
index 29731754c6cc..9790ea98d318 100644
--- a/web-common/src/features/canvas/inspector/DefaultSortInput.svelte
+++ b/web-common/src/features/canvas/inspector/DefaultSortInput.svelte
@@ -4,8 +4,10 @@
   import InputLabel from "@rilldata/web-common/components/forms/InputLabel.svelte";
   import ArrowDown from "@rilldata/web-common/components/icons/ArrowDown.svelte";
   import ChevronRight from "@rilldata/web-common/components/icons/ChevronRight.svelte";
+  import DelayedCircleOutlineSpinner from "@rilldata/web-common/components/spinner/DelayedCircleOutlineSpinner.svelte";
   import type { PivotCanvasComponent } from "../components/pivot";
   import {
+    areSortChipsReady,
     getSortChips,
     getSortLabel,
     sortEquals,
@@ -27,6 +29,10 @@
   // Show the active sort while the user is sorting; otherwise the stored default.
   $: shownSort = activeSort ?? storedDefault;
 
+  $: chipsReady = shownSort
+    ? areSortChipsReady(shownSort.id, $config, columnDimensionAxes)
+    : true;
+
   $: chips = shownSort
     ? getSortChips(shownSort.id, $config, columnDimensionAxes)
     : [];
@@ -51,25 +57,31 @@
   <InputLabel small {label} id="default_sort" />
 
   {#if shownSort}
-    <div class="flex items-center gap-1 flex-wrap">
-      {#each chips as chip, i (i)}
-        {#if i > 0}
-          <span class="text-fg-disabled shrink-0">
-            <ChevronRight size="12px" />
-          </span>
-        {/if}
-        <Chip readOnly compact type={chip.type} label={chip.label}>
-          <span class="font-bold truncate" slot="body">{chip.label}</span>
-        </Chip>
-      {/each}
-      <span
-        class="ml-0.5 text-fg-secondary transition-transform"
-        class:-rotate-180={!shownSort.desc}
-        title={shownSort.desc ? "Descending" : "Ascending"}
-      >
-        <ArrowDown size="14px" />
-      </span>
-    </div>
+    {#if chipsReady}
+      <div class="flex items-center gap-1 flex-wrap">
+        {#each chips as chip, i (i)}
+          {#if i > 0}
+            <span class="text-fg-disabled shrink-0">
+              <ChevronRight size="12px" />
+            </span>
+          {/if}
+          <Chip readOnly compact type={chip.type} label={chip.label}>
+            <span class="font-bold truncate" slot="body">{chip.label}</span>
+          </Chip>
+        {/each}
+        <span
+          class="ml-0.5 text-fg-secondary transition-transform"
+          class:-rotate-180={!shownSort.desc}
+          title={shownSort.desc ? "Descending" : "Ascending"}
+        >
+          <ArrowDown size="14px" />
+        </span>
+      </div>
+    {:else}
+      <div class="flex items-center gap-1 text-fg-secondary">
+        <DelayedCircleOutlineSpinner isLoading size="14px" />
+      </div>
+    {/if}
 
     <div class="flex items-center justify-between">
       <Button type="text" disabled={!canMakeDefault} onclick={makeDefault}>

From 3b6c73d1141ed9bd464e09e4df2d80e0efb05015 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Sun, 5 Jul 2026 12:34:40 +0530
Subject: [PATCH 3/4] fix flash on table loading

---
 .../canvas/components/pivot/CanvasPivotDisplay.svelte      | 6 +++++-
 .../src/features/canvas/components/pivot/selector.ts       | 7 +++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte b/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte
index c11947c8dfa0..e947d9383e3d 100644
--- a/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte
+++ b/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte
@@ -38,7 +38,11 @@
   $: _metricViewSpec = getMetricsViewFromName(tableSpec.metrics_view);
   $: metricsViewSpec = $_metricViewSpec.metricsView;
 
-  $: schema = validateTableSchema(metricsViewSpec, tableSpec);
+  $: schema = validateTableSchema(
+    metricsViewSpec,
+    tableSpec,
+    $_metricViewSpec.isLoading,
+  );
   $: widthScopeKey = `canvas:${component.parent.name}:${component.id}`;
 
   let defaultSorting: SortingState;
diff --git a/web-common/src/features/canvas/components/pivot/selector.ts b/web-common/src/features/canvas/components/pivot/selector.ts
index 25db644879de..c050e7690ee3 100644
--- a/web-common/src/features/canvas/components/pivot/selector.ts
+++ b/web-common/src/features/canvas/components/pivot/selector.ts
@@ -9,10 +9,17 @@ import type { V1MetricsViewSpec } from "@rilldata/web-common/runtime-client";
 export function validateTableSchema(
   metricsView: V1MetricsViewSpec | undefined,
   tableSpec: PivotSpec | TableSpec,
+  isLoading = false,
 ): {
   isValid: boolean;
   error?: string;
 } {
+  // While the metrics view resource is still loading its spec is undefined;
+  // treat this as valid so we don't flash a "not found" error on page load.
+  if (isLoading) {
+    return { isValid: true, error: undefined };
+  }
+
   if (!metricsView) {
     return {
       isValid: false,

From c02a3549529d34f33d183a11b48c37884d43ecb1 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Sun, 5 Jul 2026 12:38:03 +0530
Subject: [PATCH 4/4] fix loading spinner

---
 .../src/features/canvas/inspector/DefaultSortInput.svelte     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-common/src/features/canvas/inspector/DefaultSortInput.svelte b/web-common/src/features/canvas/inspector/DefaultSortInput.svelte
index 9790ea98d318..ddfa696e84e1 100644
--- a/web-common/src/features/canvas/inspector/DefaultSortInput.svelte
+++ b/web-common/src/features/canvas/inspector/DefaultSortInput.svelte
@@ -4,7 +4,7 @@
   import InputLabel from "@rilldata/web-common/components/forms/InputLabel.svelte";
   import ArrowDown from "@rilldata/web-common/components/icons/ArrowDown.svelte";
   import ChevronRight from "@rilldata/web-common/components/icons/ChevronRight.svelte";
-  import DelayedCircleOutlineSpinner from "@rilldata/web-common/components/spinner/DelayedCircleOutlineSpinner.svelte";
+  import LoadingCircleOutline from "@rilldata/web-common/components/icons/LoadingCircleOutline.svelte";
   import type { PivotCanvasComponent } from "../components/pivot";
   import {
     areSortChipsReady,
@@ -79,7 +79,7 @@
       </div>
     {:else}
       <div class="flex items-center gap-1 text-fg-secondary">
-        <DelayedCircleOutlineSpinner isLoading size="14px" />
+        <LoadingCircleOutline size="14px" />
       </div>
     {/if}