@antelopejs/dms 0.7.19 → 0.7.21

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/utils/urlFilters.ts

@@ -27,3 +27,21 @@ export function withoutQueryParam<Query extends Record<string, unknown>>(
   const { [param]: _removed, ...rest } = query;
   return rest as Query;
 }
+
+/** The query of a URL, absolute or relative to the page, one value per key. */
+export function queryOfUrl(url: string): Record<string, string> {
+  return Object.fromEntries(new URL(url, "http://dms.invalid").searchParams);
+}
+
+/**
+ * The query the browser shows, else the route's on a server render. A table
+ * writes some keys in place (the open `?record=`, removed on close), so the
+ * route, which follows the last visit, can still hold a key the browser no
+ * longer shows: a visit rebuilt from it would bring the key back.
+ */
+export function currentQuery(
+  routeQuery: Record<string, unknown>,
+): Record<string, unknown> {
+  if (typeof window === "undefined") return routeQuery;
+  return queryOfUrl(window.location.href);
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/utils/views.ts

@@ -183,6 +183,35 @@ export interface UrlKeyReading {
   ignoredShortKey?: boolean;
 }
 
+/**
+ * The key this table writes `key` (`tab`, `record`) under: the short one on
+ * its page's only table, else prefixed with its id (`content.tab`).
+ */
+export function tableUrlKey(scope: TableUrlScope, key: string): string {
+  return scope.isSoleTableView || !scope.tableId
+    ? key
+    : `${scope.tableId}.${key}`;
+}
+
+/**
+ * Writes (or, without a value, removes) `key` for this table in the browser's
+ * URL in place: no visit, no history entry. Returns the URL written, or
+ * `undefined` on a server render.
+ */
+export function writeTableUrlKey(
+  scope: TableUrlScope,
+  key: string,
+  value?: string,
+): URL | undefined {
+  if (typeof window === "undefined") return undefined;
+  const url = new URL(window.location.href);
+  const scopedKey = tableUrlKey(scope, key);
+  if (value) url.searchParams.set(scopedKey, value);
+  else url.searchParams.delete(scopedKey);
+  window.history.replaceState(window.history.state, "", url);
+  return url;
+}
+
 /**
  * The value the URL gives `key` (`view`, `tab`) for this table: under its
  * prefixed key (`content.view`) or, when it is its page's only table, the

package/frontend-vue/layers/dms-ui/app/components/table-view/TableView.vue

@@ -78,12 +78,8 @@ import { selectedRowIds } from "../../build/composables/table-view/utils/bulkAct
 import { isBulkAction } from "../../build/composables/actions/bulkSelection";
 import { selectionScopeKey } from "../../build/utils/selectionScope";
 import {
-  type DeepLinkOutcome,
-  deepLinkOutcome,
   isDeepLinkAction,
-  readRecordId,
   resolveDeepLinkedRow,
-  writeRecordId,
 } from "../../build/composables/table-view/utils/recordLink";
 import {
   rowSidePanelOwnerKey,
@@ -119,6 +115,7 @@ import type {
   TableViewSwitcherItem,
 } from "../../build/components/table/Table.vue";
 import {
+  currentQuery,
   visibleUrlFilters,
   withoutQueryParam,
 } from "../../build/composables/table-view/utils/urlFilters";
@@ -155,6 +152,7 @@ import {
   readTableUrlTab,
   useTableUrlTab,
 } from "../../build/composables/table-view/useTableUrlTab";
+import { useTableRecordLink } from "../../build/composables/table-view/useTableRecordLink";
 import TableViews, {
   type TableViewItem,
 } from "../../build/components/table/Views.vue";
@@ -269,6 +267,11 @@ const kanbanGroupByOptions = kanbanEligibleColumns.map((column) => ({
 const { displays: registeredDisplays, getById } = useTableViewDisplays();
 
 const offeredDisplayIds = new Set(resolvedDisplays.map((d) => d.id));
+// Where a stale or unavailable choice lands: the grid, unless the table view
+// drops it, then its default display.
+const fallbackDisplayId = offeredDisplayIds.has(TABLE_DISPLAY_ID)
+  ? TABLE_DISPLAY_ID
+  : defaultDisplay;
 const resolvedDisplay = (id: string): TableViewDisplayConfig | undefined =>
   resolvedDisplays.find((d) => d.id === id);
 const optionsForDisplay = (id: string): Record<string, unknown> | undefined =>
@@ -295,7 +298,7 @@ const activeDisplayId = ref<string>(
     ? defaultDisplay
     : offeredDisplayIds.has(persistedDisplay)
       ? persistedDisplay
-      : TABLE_DISPLAY_ID,
+      : fallbackDisplayId,
 );
 
 /** A display the backend config renders by itself, with no client plugin. */
@@ -411,9 +414,11 @@ const shownUrlFilters = computed<TableUrlFilter[]>(() =>
   visibleUrlFilters(queryParamFilters, route.query as Record<string, unknown>),
 );
 
+// Rebuilt from the URL the browser shows: a `?record=` a closed drawer
+// removed in place must not come back with the visit.
 const removeUrlFilter = (param: string) =>
   router.replace({
-    query: withoutQueryParam(route.query, param),
+    query: withoutQueryParam(currentQuery(route.query), param),
   });
 
 const routeParamHiddenFilters = computed<TableFilter[]>(() => {
@@ -587,7 +592,7 @@ const {
     ),
     display: offeredDisplayIds.has(defaultDisplay)
       ? defaultDisplay
-      : TABLE_DISPLAY_ID,
+      : fallbackDisplayId,
     density: props.density ?? DEFAULT_DENSITY,
     displays: offeredDisplayIds,
   },
@@ -1296,8 +1301,10 @@ const {
   rowNavigation: {
     rows: () => (shownResults.value ?? []) as Data[],
     rowIdKey: props.rowIdKey ?? ROW_ID_DEFAULT_KEY,
+    getRow: (id) => tableRows.getRow(id) as Promise<Data | undefined>,
   },
   recordScope: urlScope,
+  onRecordShown: (id) => recordLink?.shown(id),
 });
 
 // Custom actions offered on the selection bar. "Select all N matching"
@@ -1704,59 +1711,40 @@ watch(rowSelect, (selection) => {
 const deepLinkAction = (tableProps.value.rowActions?.custom ?? []).find(
   isDeepLinkAction,
 );
-const openRecordFromUrl = async () => {
-  const id = deepLinkAction ? readRecordId(route.query, urlScope) : undefined;
-  if (!deepLinkAction || !id) return;
-  await until(isListLoading).toBe(false);
-  const { row, isMissing } = await resolveDeepLinkedRow(id, {
-    listed: shownResults.value ?? undefined,
-    idOf: getRowId,
-    getRow: tableRows.getRow,
-  });
-  const outcome = deepLinkOutcome({ row, isMissing }, deepLinkAction);
-  deepLinkOutcomes[outcome](deepLinkAction, id, row as Data);
-};
+const recordLink = deepLinkAction
+  ? useTableRecordLink<T>({
+      route,
+      urlScope,
+      action: deepLinkAction,
+      resolve: async (id) => {
+        await until(isListLoading).toBe(false);
+        return resolveDeepLinkedRow(id, {
+          listed: shownResults.value ?? undefined,
+          idOf: getRowId,
+          getRow: tableRows.getRow,
+        });
+      },
+      open: (row) => handleCustomRowAction(deepLinkAction, row as Data),
+      showMissing: (id) => handleMissingRow(deepLinkAction, id),
+      notify: (outcome) => toast.add(recordLinkToasts[outcome]()),
+    })
+  : undefined;
 
-const notifyUnresolvedRecordLink = () => {
-  writeRecordId(urlScope);
-  toast.add({
+const recordLinkToasts = {
+  notify: () => ({
     title: t("dms.record_link.not_found_title"),
     description: t("dms.record_link.not_found_description"),
     color: Color.warning,
     icon: "i-ph-link-break",
-  });
-};
-
-const notifyFailedRecordLink = () => {
-  writeRecordId(urlScope);
-  toast.add({
+  }),
+  notifyFailed: () => ({
     title: t("dms.record_link.failed_title"),
     description: t("dms.record_link.failed_description"),
     color: Color.error,
     icon: "i-ph-warning-circle",
-  });
-};
-
-const deepLinkOutcomes: Record<
-  DeepLinkOutcome,
-  (action: CustomRowAction, id: string, row: Data) => void
-> = {
-  open: (action, _id, row) => handleCustomRowAction(action, row),
-  missingPanel: (action, id) => handleMissingRow(action, id),
-  notify: notifyUnresolvedRecordLink,
-  notifyFailed: notifyFailedRecordLink,
+  }),
 };
 
-// A visit that keeps the page mounted (a link to the same page with another
-// `?record=`) opens the row it names, as a fresh load would. The table's own
-// writes replace the URL in place and never reach the route.
-watch(
-  () => readRecordId(route.query, urlScope),
-  (id, previous) => {
-    if (id && id !== previous) void openRecordFromUrl();
-  },
-);
-
 const selectedIds = computed(() => selectedRowIds(rowSelect.value));
 
 const isRowActionEnabled = (
@@ -1872,6 +1860,7 @@ const displayContext = computed(
     items: shownResults.value ?? EMPTY_ITEMS,
     columns: props.columns,
     loading: isListLoading.value,
+    firstPageLoading: isFirstPageLoading.value,
     selection: { ids: selectedIds.value, ...displaySelection },
     pagination: {
       pageIndex: paginationState.value.pageIndex,
@@ -2086,17 +2075,16 @@ const checkUrlParameter = () => {
 
 onMounted(() => {
   checkUrlParameter();
-  void openRecordFromUrl();
   void loadRelationQuickFilters();
   void refreshLinkTabCounts();
-  // The registry is client-only; once hydrated, degrade to the table display if
-  // the active id is no longer available (e.g. kanban with no eligible column).
+  // The registry is client-only; once hydrated, degrade to the fallback display
+  // if the active id is no longer available (e.g. kanban with no eligible column).
   if (
-    activeDisplayId.value !== TABLE_DISPLAY_ID &&
+    activeDisplayId.value !== fallbackDisplayId &&
     !isConfigRenderedDisplay(activeDisplayId.value) &&
     !availableDisplays.value.some((d) => d.id === activeDisplayId.value)
   ) {
-    activeDisplayId.value = TABLE_DISPLAY_ID;
+    activeDisplayId.value = fallbackDisplayId;
   }
 });
 </script>
@@ -2142,6 +2130,7 @@ onMounted(() => {
     :tabs="tabsWithCount"
     :initial-column-visibility="initialVisibility"
     :loading="isListLoading"
+    :first-page-loading="isFirstPageLoading"
     :load-error="listLoadError"
     :data="shownResults || []"
     :pagination-options="{ manualPagination: true, rowCount: data?.total }"

package/frontend-vue/layers/dms-ui/app/composables/table-view/types/config.ts

@@ -296,6 +296,8 @@ export interface TableViewConfig<T extends Data>
   tabs?: TableViewTab[];
   /** Displays this table view offers, beyond the implicit built-in `table`. */
   displays?: TableViewDisplayConfig[];
+  /** Whether the built-in `table` display is offered. Defaults to `true`. */
+  tableDisplay?: boolean;
   /** Display shown by default when the user has no saved preference. Defaults to "table". */
   defaultDisplay?: string;
   /** Expandable rows: caret column + detail band. */

package/frontend-vue/layers/dms-ui/app/composables/table-view/types/display.ts

@@ -214,7 +214,13 @@ export interface TableViewDisplayContext<T = Record<string, unknown>> {
   items: T[];
   /** Full column metadata (types, labels, accessor keys) — for field rendering. */
   columns: TableViewColumn[];
+  /** The shared query is in flight: a first read or any re-read. */
   loading: boolean;
+  /**
+   * No answer has arrived yet: draw a skeleton. A re-read keeps the rows,
+   * or the empty state, on screen; swapping either for a skeleton flashes.
+   */
+  firstPageLoading: boolean;
 
   selection: TableViewDisplaySelection;
   pagination: TableViewDisplayPagination;

package/frontend-vue/tests/row-side-panel.test.ts

@@ -188,7 +188,12 @@ interface Mounted {
   showTable: Ref<boolean>;
 }
 
-function mountPanel(shownRows: Ref<Row[]> = ref(rows)): Mounted {
+type ReadRow = (id: string) => Promise<Row | undefined>;
+
+function mountPanel(
+  shownRows: Ref<Row[]> = ref(rows),
+  getRow?: ReadRow,
+): Mounted {
   let targets: ReturnType<typeof useActionTargets> | undefined;
   const showTable = ref(true);
   const Table = defineComponent({
@@ -201,7 +206,11 @@ function mountPanel(shownRows: Ref<Row[]> = ref(rows)): Mounted {
         refreshCallback: () => {
           refreshes += 1;
         },
-        rowNavigation: { rows: () => shownRows.value, rowIdKey: "_id" },
+        rowNavigation: {
+          rows: () => shownRows.value,
+          rowIdKey: "_id",
+          getRow,
+        },
         recordScope: { tableId: "requests", isSoleTableView: true },
       });
       return () => h("table");
@@ -480,6 +489,88 @@ describe("deep link to a row the table does not list", () => {
   });
 });
 
+describe("showing another row from the panel", () => {
+  const older: Row = { _id: "r9", name: "Older" };
+  const notFoundError = () =>
+    Object.assign(new Error("Not Found"), { statusCode: 404 });
+  const showRow = (rowOrId: Row | string) =>
+    (
+      useRowSidePanelContent().value?.componentOptions.showRow as (
+        rowOrId: Row | string,
+      ) => Promise<void>
+    )(rowOrId);
+
+  it("moves the highlight, the position and ?record= onto a listed row", async () => {
+    const { host, targets } = mountPanel();
+    targets.handleCustomRowAction(panelAction(), rows[0]);
+    await settle();
+    await showRow("r3");
+    await settle();
+    expect(shownName(host)).toBe("Third");
+    expect(position(host)).toBe("side_panel.position(3/3)");
+    expect(useRowSidePanelContent().value?.rowKey).toBe("r3");
+    expect(window.location.search).toBe("?record=r3");
+    await showRow(rows[1]!);
+    await settle();
+    expect(position(host)).toBe("side_panel.position(2/3)");
+  });
+
+  it("reads an unlisted row by id, shown without a position", async () => {
+    const getRow = vi.fn(async () => older);
+    const { host, targets } = mountPanel(ref(rows), getRow);
+    targets.handleCustomRowAction(panelAction(), rows[0]);
+    await settle();
+    await showRow("r9");
+    await settle();
+    expect(getRow).toHaveBeenCalledWith("r9");
+    expect(shownName(host)).toBe("Older");
+    expect(position(host)).toBeUndefined();
+    expect(useRowSidePanelContent().value?.rowKey).toBe("r9");
+    expect(window.location.search).toBe("?record=r9");
+  });
+
+  it("says a row its route answers 404 for is gone", async () => {
+    const { host, targets } = mountPanel(ref(rows), async () => {
+      throw notFoundError();
+    });
+    targets.handleCustomRowAction(panelAction(), rows[0]);
+    await settle();
+    await showRow("gone");
+    await settle();
+    expect(query(host, "[data-dms-row-side-panel-not-found]")).not.toBeNull();
+    expect(useRowSidePanelContent().value?.rowKey).toBeUndefined();
+    expect(window.location.search).toBe("?record=gone");
+  });
+
+  it("rejects a row it cannot read, keeping the row it shows", async () => {
+    const { host, targets } = mountPanel();
+    targets.handleCustomRowAction(panelAction(), rows[0]);
+    await settle();
+    await expect(showRow("r9")).rejects.toThrow("r9");
+    await settle();
+    expect(shownName(host)).toBe("First");
+    expect(window.location.search).toBe("?record=r1");
+  });
+
+  it("leaves the panel shut when it closed while the row was read", async () => {
+    let answer!: (row: Row) => void;
+    const { host, targets } = mountPanel(
+      ref(rows),
+      () => new Promise((resolve) => (answer = resolve)),
+    );
+    targets.handleCustomRowAction(panelAction(), rows[0]);
+    await settle();
+    const shown = showRow("r9");
+    closeRowSidePanel();
+    answer(older);
+    await shown;
+    await settle();
+    expect(useRowSidePanelContent().value).toBeNull();
+    expect(query(host, "[data-dms-side-panel]")).toBeNull();
+    expect(window.location.search).toBe("");
+  });
+});
+
 describe("side panel on a missing row", () => {
   const notFound = (host: ParentNode) =>
     query(host, "[data-dms-row-side-panel-not-found]");

package/frontend-vue/tests/table-view-bulk-drawer.test.ts

@@ -271,9 +271,11 @@ describe("action targets on a selection and on a listed row", () => {
   it("steps a row's drawer through the rows shown and keeps it in the URL", async () => {
     window.history.replaceState(null, "", "/runs");
     const rows = [{ _id: "r1" }, { _id: "r2" }];
+    const onRecordShown = vi.fn();
     const targets = mountTargets({
       rowNavigation: { rows: () => rows, rowIdKey: "_id" },
       recordScope: { tableId: "runs", isSoleTableView: true },
+      onRecordShown,
     });
     targets.handleCustomRowAction(
       {
@@ -306,10 +308,125 @@ describe("action targets on a selection and on a listed row", () => {
     await nextTick();
     await Promise.resolve();
     expect(window.location.search).toBe("");
+    expect(onRecordShown.mock.calls).toEqual([["r1"], ["r2"], [undefined]]);
     window.dispatchEvent(new KeyboardEvent("keydown", { key: "k" }));
     expect(drawer!.patches).toHaveLength(1);
   });
 
+  it("shows another row in a row's drawer by id, read when unlisted", async () => {
+    window.history.replaceState(null, "", "/runs");
+    const rows = [{ _id: "r1" }, { _id: "r2" }];
+    const older = { _id: "r9" };
+    const getRow = vi.fn(async (id: string) =>
+      id === "r9" ? older : undefined,
+    );
+    const targets = mountTargets({
+      rowNavigation: { rows: () => rows, rowIdKey: "_id", getRow },
+      recordScope: { tableId: "runs", isSoleTableView: true },
+    });
+    targets.handleCustomRowAction(
+      {
+        label: "Details",
+        deepLink: true,
+        target: { type: "drawer", component: { componentName: "RunDrawer" } },
+      },
+      rows[0],
+    );
+    await vi.waitFor(() => expect(drawers).toHaveLength(1));
+    const [drawer] = drawers;
+    const options = drawer!.options.componentOptions as Record<string, unknown>;
+    const showRow = options.showRow as (row: object | string) => Promise<void>;
+
+    await showRow("r9");
+    expect(drawer!.patches[0]).toMatchObject({ componentKey: "r9" });
+    const patched = drawer!.patches[0]!.componentOptions as Record<
+      string,
+      unknown
+    >;
+    expect(patched.rowData).toBe(older);
+    expect(patched.navigation).toBeUndefined();
+    expect(window.location.search).toBe("?record=r9");
+
+    await showRow("r2");
+    expect(getRow).toHaveBeenCalledTimes(1);
+    expect(drawer!.patches[1]).toMatchObject({ componentKey: "r2" });
+    expect(window.location.search).toBe("?record=r2");
+
+    await expect(showRow("r404")).rejects.toThrow("r404");
+    expect(drawer!.patches).toHaveLength(2);
+    drawer!.settle();
+  });
+
+  const deferredRows = () => {
+    const pending = new Map<string, (row: object) => void>();
+    const getRow = vi.fn(
+      (id: string) =>
+        new Promise<object | undefined>((resolve) => pending.set(id, resolve)),
+    );
+    return { getRow, resolve: (id: string) => pending.get(id)!({ _id: id }) };
+  };
+
+  const openDeepLinkedDrawer = (getRow: (id: string) => Promise<unknown>) => {
+    window.history.replaceState(null, "", "/runs");
+    const rows = [{ _id: "r1" }];
+    const targets = mountTargets({
+      rowNavigation: { rows: () => rows, rowIdKey: "_id", getRow },
+      recordScope: { tableId: "runs", isSoleTableView: true },
+      onRecordShown: vi.fn(),
+    });
+    targets.handleCustomRowAction(
+      {
+        label: "Details",
+        deepLink: true,
+        target: { type: "drawer", component: { componentName: "RunDrawer" } },
+      },
+      rows[0],
+    );
+    return targets;
+  };
+
+  const showRowOf = (drawer: (typeof drawers)[number]) =>
+    (drawer.options.componentOptions as Record<string, unknown>).showRow as (
+      row: object | string,
+    ) => Promise<void>;
+
+  it("drops a row read that resolves after its drawer closed", async () => {
+    const rows = deferredRows();
+    openDeepLinkedDrawer(rows.getRow);
+    await vi.waitFor(() => expect(drawers).toHaveLength(1));
+    const [drawer] = drawers;
+    const shown = showRowOf(drawer!)("r9");
+
+    drawer!.settle();
+    await vi.waitFor(() => expect(window.location.search).toBe(""));
+    rows.resolve("r9");
+    await shown;
+
+    expect(window.location.search).toBe("");
+    expect(drawer!.patches).toHaveLength(0);
+    expect(drawers).toHaveLength(1);
+  });
+
+  it("applies only the latest of two rows read at once", async () => {
+    const rows = deferredRows();
+    openDeepLinkedDrawer(rows.getRow);
+    await vi.waitFor(() => expect(drawers).toHaveLength(1));
+    const [drawer] = drawers;
+    const showRow = showRowOf(drawer!);
+    const first = showRow("r8");
+    const second = showRow("r9");
+
+    rows.resolve("r9");
+    await second;
+    rows.resolve("r8");
+    await first;
+
+    expect(drawer!.patches).toHaveLength(1);
+    expect(drawer!.patches[0]).toMatchObject({ componentKey: "r9" });
+    expect(window.location.search).toBe("?record=r9");
+    drawer!.settle();
+  });
+
   it("hands a bulk drawer the selection instead of a row", async () => {
     const targets = mountTargets();
     targets.handleBulkCustomAction(

package/frontend-vue/tests/table-view-cards-reread.test.ts

@@ -0,0 +1,77 @@
+// @vitest-environment jsdom
+import { computed, createApp, h, reactive, ref, type App } from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import CardsDisplay from "../layers/dms-ui/app/build/components/table-view/CardsDisplay.vue";
+import type { TableViewDisplayContext } from "../layers/dms-ui/app/composables/table-view/types/display";
+
+vi.mock("../layers/dms-ui/app/build/components/table/Pagination.vue", () => ({
+  default: { render: () => null },
+}));
+vi.mock("../layers/dms-ui/app/build/components/table/Empty.vue", () => ({
+  default: { render: () => h("p", { "data-test": "empty" }) },
+}));
+vi.mock(
+  "../layers/dms-ui/app/build/components/table-view/CardGridSkeleton.vue",
+  () => ({ default: { render: () => h("p", { "data-test": "skeleton" }) } }),
+);
+
+interface ReadState {
+  loading: boolean;
+  firstPageLoading: boolean;
+}
+
+function createContext(state: ReadState) {
+  return reactive({
+    items: [],
+    columns: [],
+    ...state,
+    rowIdKey: "_id",
+    labelKey: "name",
+    options: {},
+    pagination: { pageIndex: 0, pageSize: 10, total: 0 },
+    selection: { isSelected: () => false, toggle: () => {} },
+    actions: { canAdd: false, open: () => {} },
+  }) as unknown as TableViewDisplayContext;
+}
+
+describe("the cards display of an empty list", () => {
+  let app: App | undefined;
+  let container: HTMLElement;
+
+  const mount = (context: TableViewDisplayContext) => {
+    app = createApp({ render: () => h(CardsDisplay, { context }) });
+    container = document.createElement("div");
+    document.body.append(container);
+    app.mount(container);
+  };
+  const shown = (test: string) =>
+    container.querySelector(`[data-test="${test}"]`) !== null;
+
+  beforeEach(() => {
+    vi.stubGlobal("computed", computed);
+    vi.stubGlobal("h", h);
+    vi.stubGlobal("useI18n", () => ({ locale: ref("en"), t: (t: string) => t }));
+    vi.stubGlobal("useTranslation", () => ({ processI18n: (t: string) => t }));
+    vi.stubGlobal("useDataTypes", () => ({ getDataType: () => undefined }));
+    vi.stubGlobal("resolveDmsComponent", () => undefined);
+  });
+
+  afterEach(() => {
+    app?.unmount();
+    app = undefined;
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("draws the skeleton until the first answer arrives", () => {
+    mount(createContext({ loading: true, firstPageLoading: true }));
+    expect(shown("skeleton")).toBe(true);
+    expect(shown("empty")).toBe(false);
+  });
+
+  it("keeps the empty state on screen while the list is read again", () => {
+    mount(createContext({ loading: true, firstPageLoading: false }));
+    expect(shown("empty")).toBe(true);
+    expect(shown("skeleton")).toBe(false);
+  });
+});