@flamingo-stack/openframe-frontend-core 0.0.780 → 0.0.782

package/dist/components/features/devices/devices-grid.js

@@ -1,28 +1,40 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRouter } from "../../../embed-shims/next-navigation.js";
-import { DeviceCardSkeleton, DeviceCardSkeletonGrid } from "../../loading/device-card-skeleton.js";
+import { LoadingRegion } from "../../loading/loading-region.js";
 import { DeviceCard } from "../../ui/index.js";
+import { LoadingItems, useLoadingScope } from "../../ui/loading-scope.js";
 import { getDeviceName } from "./device-name.js";
 import { getDeviceOperatingSystem, getDeviceStatusConfig } from "./device-status.js";
 import { useDevicesViewConfig } from "./devices-view-config.js";
+const DEVICES_GRID_CLASS = "grid grid-cols-1 gap-4 content-md:grid-cols-2 content-lg:grid-cols-3";
+const DEVICES_GRID_SKELETON_CARDS = 12;
+const GRID_CARD_ACTIONS = { moreButton: { visible: false } };
+function DeviceCardLoadingPage({ count }) {
+  return /* @__PURE__ */ jsx(LoadingItems, { count, children: () => /* @__PURE__ */ jsx(DeviceCard, { loading: true, device: { name: "" }, actions: GRID_CARD_ACTIONS, className: "h-full", "data-loading-item": true }) });
+}
 function DevicesGrid({
   devices,
-  isLoading,
+  isLoading: isLoadingProp,
   hasNextPage,
   isFetchingNextPage,
   sentinelRef,
   emptyMessage = "No devices found. Try adjusting your search or filters.",
-  loadingRegion = true
+  loadingRegion = true,
+  pageSize = DEVICES_GRID_SKELETON_CARDS
 }) {
+  const isLoading = useLoadingScope() || isLoadingProp;
   const router = useRouter();
   const { getDeviceHref } = useDevicesViewConfig();
   const handleDeviceClick = (device) => {
     const href = device.machineId || device.id ? getDeviceHref?.(device) : void 0;
     if (href) router.push(href);
   };
-  return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: isLoading && devices.length === 0 ? /* @__PURE__ */ jsx(DeviceCardSkeletonGrid, { count: 12, region: loadingRegion }) : devices.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center rounded-[6px] border border-ods-border bg-ods-card", children: /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary", children: emptyMessage }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 content-md:grid-cols-2 content-lg:grid-cols-3", children: [
+  return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: isLoading && devices.length === 0 ? (
+    // A full page of the grid's own cards, each its own skeleton (no "more" button, as the loaded cards).
+    /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading devices", announce: loadingRegion, className: DEVICES_GRID_CLASS, children: /* @__PURE__ */ jsx(DeviceCardLoadingPage, { count: pageSize }) })
+  ) : devices.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center rounded-[6px] border border-ods-border bg-ods-card", children: /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary", children: emptyMessage }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: DEVICES_GRID_CLASS, children: [
       devices.map((device) => {
         const statusConfig = getDeviceStatusConfig(device.status);
         return /* @__PURE__ */ jsx(
@@ -41,21 +53,19 @@ function DevicesGrid({
               variant: statusConfig.variant
             } : void 0,
             onDeviceClick: () => handleDeviceClick(device),
-            actions: {
-              moreButton: {
-                visible: false
-              }
-            },
-            className: "h-full"
+            actions: GRID_CARD_ACTIONS,
+            className: "h-full",
+            "data-loading-item": true
           },
           device.id || device.machineId
         );
       }),
-      isFetchingNextPage && Array.from({ length: 4 }, (_, i) => /* @__PURE__ */ jsx(DeviceCardSkeleton, {}, `skeleton-${i}`))
+      isFetchingNextPage && /* @__PURE__ */ jsx(DeviceCardLoadingPage, { count: pageSize })
     ] }),
     hasNextPage && /* @__PURE__ */ jsx("div", { ref: sentinelRef, className: "h-1", "aria-hidden": "true" })
   ] }) });
 }
 export {
+  DEVICES_GRID_SKELETON_CARDS,
   DevicesGrid
 };

package/dist/components/features/devices/devices-list.d.ts

@@ -127,5 +127,5 @@ export interface DevicesListProps<T extends DeviceRow = DeviceRow> {
  * fragment on `Device` that each caller spreads on its own connection, the
  * props here do not change.
  */
-export declare function DevicesList<T extends DeviceRow = DeviceRow>({ devices, isLoading, deviceFilters, filtersPending, isPending, totalCount, narrowing, onNarrowingChange, hideColumns, hideFilters, rowActions, emptyState, narrowedEmptyState, skeletonRows, infiniteScroll, stickyToolbar, stickyHeaderOffset, className, }: DevicesListProps<T>): import("react").JSX.Element;
+export declare function DevicesList<T extends DeviceRow = DeviceRow>({ devices, isLoading: isLoadingProp, deviceFilters, filtersPending, isPending, totalCount, narrowing, onNarrowingChange, hideColumns, hideFilters, rowActions, emptyState, narrowedEmptyState, skeletonRows, infiniteScroll, stickyToolbar, stickyHeaderOffset, className, }: DevicesListProps<T>): import("react").JSX.Element;
 //# sourceMappingURL=devices-list.d.ts.map

package/dist/components/features/devices/devices-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devices-list.d.ts","sourceRoot":"","sources":["../../../../src/components/features/devices/devices-list.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAwB,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAsC,KAAK,WAAW,EAAmB,MAAM,UAAU,CAAC;AAGjG,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGxD;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,0FAA0F;IAC1F,IAAI,EAAE,MAAM,EAAE,CAAC;CAChB;AAED,eAAO,MAAM,uBAAuB,EAAE,oBAMrC,CAAC;AAEF,kHAAkH;AAClH,wBAAgB,UAAU,CAAC,SAAS,EAAE,oBAAoB,GAAG,OAAO,CAQnE;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS;IAC/D;;;OAGG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;OASG;IACH,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,wFAAwF;IACxF,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAEzD,mGAAmG;IACnG,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,wDAAwD;IACxD,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,SAAS,CAAC;IAEtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAEjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE;QACf,WAAW,EAAE,OAAO,CAAC;QACrB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,UAAU,EAAE,MAAM,IAAI,CAAC;QACvB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IAEF;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,EAC3D,OAAO,EACP,SAAS,EACT,aAAoB,EACpB,cAAc,EACd,SAAS,EACT,UAAU,EACV,SAAmC,EACnC,iBAAwB,EACxB,WAAW,EACX,WAAW,EACX,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,YAAgB,EAChB,cAAc,EACd,aAAoB,EACpB,kBAAkB,EAClB,SAAS,GACV,EAAE,gBAAgB,CAAC,CAAC,CAAC,+BA6KrB"}
+{"version":3,"file":"devices-list.d.ts","sourceRoot":"","sources":["../../../../src/components/features/devices/devices-list.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAwB,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAsC,KAAK,WAAW,EAAmB,MAAM,UAAU,CAAC;AAIjG,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGxD;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,0FAA0F;IAC1F,IAAI,EAAE,MAAM,EAAE,CAAC;CAChB;AAED,eAAO,MAAM,uBAAuB,EAAE,oBAMrC,CAAC;AAEF,kHAAkH;AAClH,wBAAgB,UAAU,CAAC,SAAS,EAAE,oBAAoB,GAAG,OAAO,CAQnE;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS;IAC/D;;;OAGG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;OASG;IACH,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,wFAAwF;IACxF,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAEzD,mGAAmG;IACnG,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,wDAAwD;IACxD,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,SAAS,CAAC;IAEtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAEjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE;QACf,WAAW,EAAE,OAAO,CAAC;QACrB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,UAAU,EAAE,MAAM,IAAI,CAAC;QACvB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IAEF;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,EAC3D,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,aAAoB,EACpB,cAAc,EACd,SAAS,EACT,UAAU,EACV,SAAmC,EACnC,iBAAwB,EACxB,WAAW,EACX,WAAW,EACX,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,YAAyC,EACzC,cAAc,EACd,aAAoB,EACpB,kBAAkB,EAClB,SAAS,GACV,EAAE,gBAAgB,CAAC,CAAC,CAAC,+BAgLrB"}

package/dist/components/features/devices/devices-list.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
 import { useStickyToolbar } from "../../../hooks/ui/use-sticky-toolbar.js";
 import { DataTable } from "../../ui/index.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
 import { DevicesFilterToolbar } from "./devices-filter-toolbar.js";
 import { DevicesTableBody, getDeviceActionsColumn, getDeviceFilterColumns } from "./devices-table-columns.js";
 import { useTagFilterModal } from "./use-tag-filter-modal.js";
@@ -18,9 +19,10 @@ function isNarrowed(narrowing) {
 }
 const NOOP = () => {
 };
+const DEVICES_LIST_SKELETON_ROWS = 8;
 function DevicesList({
   devices,
-  isLoading,
+  isLoading: isLoadingProp,
   deviceFilters = null,
   filtersPending,
   isPending,
@@ -32,12 +34,13 @@ function DevicesList({
   rowActions,
   emptyState,
   narrowedEmptyState,
-  skeletonRows = 8,
+  skeletonRows = DEVICES_LIST_SKELETON_ROWS,
   infiniteScroll,
   stickyToolbar = true,
   stickyHeaderOffset,
   className
 }) {
+  const isLoading = useLoadingScope() || !!isLoadingProp;
   const patch = useCallback(
     (next) => onNarrowingChange({ ...narrowing, ...next }),
     [narrowing, onNarrowingChange]

package/dist/components/features/devices/devices-panel-view.d.ts

@@ -70,6 +70,12 @@ export interface DevicesPanelViewProps<T extends DeviceRow = DeviceRow> {
     onLoadMore?: () => void;
     /** The grid's infinite-scroll sentinel. */
     gridSentinelRef?: RefObject<HTMLDivElement | null>;
+    /**
+     * The host query's page size: a loading table or grid draws one full page, and the next page's skeleton the same.
+     * Omitted, the table falls back to its own page size (`DataTable.Body`, `InfiniteFooter`) and the grid to its
+     * declared default.
+     */
+    pageSize?: number;
 }
 /**
  * The device list as a page: header with the table / grid switch and the
@@ -80,5 +86,5 @@ export interface DevicesPanelViewProps<T extends DeviceRow = DeviceRow> {
  * state is the same component with `loading`: the chrome is the real one,
  * locked, so the page does not move when the rows land.
  */
-export declare function DevicesPanelView<T extends DeviceRow = DeviceRow>({ title, backButton, className, headerSlot, viewMode, onViewModeChange, actions, devices, loading, loadingRegion, isNarrowing, totalCount, deviceFilters, filterColumns, toolbar, columnFilters, onColumnFiltersChange, gridFilters, onGridFiltersChange, actionsColumn, hideColumns, hideFilters, emptyMessage, emptyState, noOrganizations, hasNextPage, isFetchingNextPage, onLoadMore, gridSentinelRef, }: DevicesPanelViewProps<T>): import("react").JSX.Element;
+export declare function DevicesPanelView<T extends DeviceRow = DeviceRow>({ title, backButton, className, headerSlot, viewMode, onViewModeChange, actions, devices, loading: loadingGiven, loadingRegion, isNarrowing, totalCount, deviceFilters, filterColumns, toolbar, columnFilters, onColumnFiltersChange, gridFilters, onGridFiltersChange, actionsColumn, hideColumns, hideFilters, emptyMessage, emptyState, noOrganizations, hasNextPage, isFetchingNextPage, onLoadMore, gridSentinelRef, pageSize, }: DevicesPanelViewProps<T>): import("react").JSX.Element;
 //# sourceMappingURL=devices-panel-view.d.ts.map

package/dist/components/features/devices/devices-panel-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devices-panel-view.d.ts","sourceRoot":"","sources":["../../../../src/components/features/devices/devices-panel-view.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"devices-panel-view.d.ts","sourceRoot":"","sources":["../../../../src/components/features/devices/devices-panel-view.tsx"],"names":[],"mappings":"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"}

package/dist/components/features/devices/devices-panel-view.js

@@ -8,6 +8,7 @@ import {
   PageLayout,
   TabSelector
 } from "../../ui/index.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
 import { DevicesFilterToolbar } from "./devices-filter-toolbar.js";
 import { DevicesGrid } from "./devices-grid.js";
 import { DevicesGridFilters } from "./devices-grid-filters.js";
@@ -43,7 +44,7 @@ function DevicesPanelView({
   onViewModeChange,
   actions,
   devices,
-  loading = false,
+  loading: loadingGiven = false,
   loadingRegion = true,
   isNarrowing = false,
   totalCount,
@@ -63,8 +64,11 @@ function DevicesPanelView({
   hasNextPage = false,
   isFetchingNextPage = false,
   onLoadMore = noop,
-  gridSentinelRef
+  gridSentinelRef,
+  pageSize
 }) {
+  const scoped = useLoadingScope();
+  const loading = scoped || loadingGiven;
   const gridColumns = filterColumns ?? getDeviceFilterColumns(deviceFilters).filter((column) => !hideFilters?.includes(column.key));
   const list = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(DevicesFilterToolbar, { ...toolbar, isLoading: loading }),
@@ -75,7 +79,7 @@ function DevicesPanelView({
         isLoading: loading,
         loadingRegion: false,
         emptyMessage: loading ? "" : emptyMessage,
-        skeletonRows: 10,
+        skeletonRows: pageSize,
         stickyHeaderOffset: "top-[96px]",
         deviceFilters,
         filtersPending: loading || void 0,
@@ -91,7 +95,7 @@ function DevicesPanelView({
             hasNextPage,
             isFetchingNextPage,
             onLoadMore,
-            skeletonRows: 2
+            skeletonRows: pageSize
           }
         )
       }
@@ -115,7 +119,8 @@ function DevicesPanelView({
           hasNextPage,
           isFetchingNextPage,
           sentinelRef: gridSentinelRef,
-          emptyMessage: loading ? "" : emptyMessage
+          emptyMessage: loading ? "" : emptyMessage,
+          pageSize
         }
       )
     ] })
@@ -141,7 +146,7 @@ function DevicesPanelView({
       contentClassName: "flex flex-col",
       children: [
         headerSlot,
-        loading && loadingRegion && /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: "Loading devices" }),
+        loading && loadingRegion && !scoped && /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: "Loading devices" }),
         noOrganizations && !loading && // Core Alert restyled to the ODS warning tokens. The icon is wrapped in a
         // span so Alert's `[&>svg]` absolute-positioning rules don't apply.
         /* @__PURE__ */ jsxs(Alert, { className: "mb-[var(--spacing-system-l)] flex items-start gap-[var(--spacing-system-m)] rounded-[6px] border-0 bg-ods-warning-secondary text-ods-warning", children: [

package/dist/components/features/devices/devices-table-columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devices-table-columns.d.ts","sourceRoot":"","sources":["../../../../src/components/features/devices/devices-table-columns.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAGjE,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,kBAAkB,EAGvB,KAAK,WAAW,EAChB,KAAK,UAAU,EAKhB,MAAM,UAAU,CAAC;AAOlB,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAiBxD;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EACpE,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,GAChD,SAAS,CAAC,CAAC,CAAC,CAad;AAwBD,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CAOnF;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS;IACpE,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qHAAqH;IACrH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,wFAAwF;IACxF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,qBAAqB,CAAC,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACvD,iHAAiH;IACjH,aAAa,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IAC7B,0GAA0G;IAC1G,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,sHAAsH;IACtH,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,uEAAuE;IACvE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4FAA4F;IAC5F,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,EAChE,OAAO,EACP,SAAS,EACT,aAAa,EACb,UAAU,EACV,YAAkC,EAClC,YAAiB,EACjB,kBAAkB,EAClB,UAAU,EACV,aAAa,EACb,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,WAAW,EACX,oBAAoB,EACpB,cAAc,EACd,UAAU,EACV,UAAiB,GAClB,EAAE,qBAAqB,CAAC,CAAC,CAAC,qBA2C1B;AAeD,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,kBAAkB,EAAE,CAAC;CACtC;AAED,kFAAkF;AAClF,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8BD,wBAAgB,sBAAsB,CAAC,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,GAAG,kBAAkB,EAAE,CAWjG;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EACnE,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,EACpC,cAAc,CAAC,EAAE,OAAO,GACvB,SAAS,CAAC,CAAC,CAAC,EAAE,CA8EhB"}
+{"version":3,"file":"devices-table-columns.d.ts","sourceRoot":"","sources":["../../../../src/components/features/devices/devices-table-columns.tsx"],"names":[],"mappings":"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"}

package/dist/components/features/devices/devices-table-columns.js

@@ -3,14 +3,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { formatDate, formatTime } from "../../../utils/format-date.js";
 import { ArrowRightUpIcon } from "../../icons-v2-generated/index.js";
+import { TextLineSkeleton } from "../../loading/unified-skeleton.js";
 import {
   Button,
   DataTable,
   EntityImage,
   Tag,
   TruncateText,
-  useDataTable
+  useDataTable,
+  useLoadingScope
 } from "../../ui/index.js";
+import { DATA_TABLE_SKELETON_ROWS } from "../../ui/data-table/utils.js";
 import { OSTypeBadge } from "../os-type-badge.js";
 import { getDeviceName } from "./device-name.js";
 import { getDeviceStatusConfig } from "./device-status.js";
@@ -38,7 +41,8 @@ function getDeviceActionsColumn(renderRowActions) {
 }
 function OpenDeviceButton({ device }) {
   const { getDeviceHref } = useDevicesViewConfig();
-  const href = getDeviceHref?.(device);
+  const loading = useLoadingScope();
+  const href = loading ? void 0 : getDeviceHref?.(device);
   const open = (event) => {
     event.preventDefault();
     if (href) window.open(href, "_blank", "noopener,noreferrer");
@@ -51,7 +55,8 @@ function OpenDeviceButton({ device }) {
       size: "icon",
       leftIcon: /* @__PURE__ */ jsx(ArrowRightUpIcon, { className: "h-5 w-5" }),
       "aria-label": "Open in new tab",
-      className: "bg-ods-card"
+      className: "bg-ods-card",
+      disabled: loading
     }
   ) });
 }
@@ -63,13 +68,16 @@ function getDeviceOpenColumn() {
     meta: { width: "w-12 shrink-0 flex-none", hideAt: "md", align: "right" }
   };
 }
+function deviceLoadingRows(count) {
+  return Array.from({ length: count }, (_, index) => ({ id: `loading-${index}`, machineId: "", status: "" }));
+}
 function DevicesTableBody({
   devices,
   isLoading,
   loadingRegion,
   emptyState,
   emptyMessage = "No devices found.",
-  skeletonRows = 10,
+  skeletonRows,
   stickyHeaderOffset,
   footerSlot,
   deviceFilters,
@@ -90,8 +98,12 @@ function DevicesTableBody({
     const open = getDeviceOpenColumn();
     return actionsColumn ? [...base, actionsColumn, open] : [...base, open];
   }, [deviceFilters, filtersPending, actionsColumn, hideColumns, disableColumnFilters]);
+  const loadingRows = useMemo(
+    () => isLoading ? deviceLoadingRows(skeletonRows ?? DATA_TABLE_SKELETON_ROWS) : null,
+    [isLoading, skeletonRows]
+  );
   const table = useDataTable({
-    data: devices,
+    data: loadingRows ?? devices,
     columns,
     // `machineId` is EMPTY (not absent) while the agent is not connected: those rows key on their id.
     getRowId: (row) => String(row.machineId || row.id),
@@ -105,13 +117,14 @@ function DevicesTableBody({
       {
         stickyHeader: !!stickyHeaderOffset,
         stickyHeaderOffset,
-        rightSlot: /* @__PURE__ */ jsx(DataTable.RowCount, { itemName: "device", totalCount })
+        rightSlot: /* @__PURE__ */ jsx(DataTable.RowCount, { itemName: "device", totalCount, loading: isLoading })
       }
     ),
     /* @__PURE__ */ jsx(
       DataTable.Body,
       {
         loading: isLoading,
+        loadingCells: true,
         loadingRegion,
         skeletonRows,
         emptyState,
@@ -127,9 +140,17 @@ function OrganizationCell({ device }) {
   const fullImageUrl = useDeviceImageUrl(device.organizationImageUrl, device.organizationImageHash);
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
     /* @__PURE__ */ jsx(EntityImage, { src: fullImageUrl, alt: device.organization || "Customer", className: "size-12 content-md:size-12" }),
-    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col justify-center", children: /* @__PURE__ */ jsx("span", { className: "break-words text-ods-text-primary text-h4", children: device.organization || "" }) })
+    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col justify-center", children: /* @__PURE__ */ jsx(OrganizationName, { name: device.organization }) })
   ] });
 }
+function OrganizationName({ name }) {
+  if (useLoadingScope() && !name) return /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-3/4" });
+  return /* @__PURE__ */ jsx("span", { className: "break-words text-ods-text-primary text-h4", children: name || "" });
+}
+function DeviceLastSeen({ lastSeen }) {
+  if (useLoadingScope() && !lastSeen) return /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "hidden w-24 content-md:block" });
+  return /* @__PURE__ */ jsx("span", { className: "hidden text-ods-text-secondary text-h6 content-md:flex", children: lastSeen ? formatDateTime(lastSeen) : "Never" });
+}
 function buildDeviceFilterOptions(deviceFilters) {
   const status = (deviceFilters?.statuses ?? []).filter((s) => DEFAULT_VISIBLE_STATUSES.includes(s.value)).map((s) => ({ id: s.value, label: getDeviceStatusConfig(s.value).label, value: s.value, count: s.count }));
   const os = (deviceFilters?.osTypes ?? []).map((o) => ({ id: o.value, label: o.value, value: o.value, count: o.count }));
@@ -184,7 +205,7 @@ function getDeviceTableColumns(deviceFilters, filtersPending) {
         const statusConfig = getDeviceStatusConfig(device.status);
         return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-start gap-1", children: [
           /* @__PURE__ */ jsx("div", { className: "inline-flex", children: /* @__PURE__ */ jsx(Tag, { label: statusConfig.label, variant: statusConfig.variant }) }),
-          /* @__PURE__ */ jsx("span", { className: "hidden text-ods-text-secondary text-h6 content-md:flex", children: device.last_seen ? formatDateTime(device.last_seen) : "Never" })
+          /* @__PURE__ */ jsx(DeviceLastSeen, { lastSeen: device.last_seen })
         ] });
       },
       meta: {

package/dist/components/features/devices/index.d.ts

@@ -3,7 +3,6 @@ export { type DeviceNameSource, getDeviceName, matchesDeviceName } from './devic
 export { DeviceSelectionModeRadio, type DeviceSelectionModeRadioProps, } from './device-selector/device-selection-mode-radio';
 export { DeviceSelector } from './device-selector/device-selector';
 export type { DeviceSelectionMode, DeviceSelectorInfiniteScroll, DeviceSelectorNarrowing, DeviceSelectorProps, DeviceSelectorServer, SubTab, } from './device-selector/device-selector.types';
-export { DeviceSelectorSkeleton } from './device-selector/device-selector-skeleton';
 export { EMPTY_NARROWING, narrowingToFilter } from './device-selector/narrowing';
 export { type DeviceCardStatus, type DeviceStatusConfig, type DeviceStatusVariant, getDeviceOperatingSystem, getDeviceStatusConfig, } from './device-status';
 export { DEFAULT_DASHBOARD_STATUSES, DEFAULT_DEVICES_LIST_STATUSES, DEFAULT_VISIBLE_STATUSES, type DefaultVisibleStatus, DEVICE_ENRICHMENT_FILTER, DEVICE_ENRICHMENT_STATUSES, DEVICE_STATUS, type DeviceStatus, HIDDEN_DEVICE_STATUSES, type HiddenDeviceStatus, } from './device-statuses';

package/dist/components/features/devices/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/features/devices/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,KAAK,gBAAgB,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,EACL,wBAAwB,EACxB,KAAK,6BAA6B,GACnC,MAAM,+CAA+C,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,YAAY,EACV,mBAAmB,EACnB,4BAA4B,EAC5B,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,MAAM,GACP,MAAM,yCAAyC,CAAC;AACjD,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AACpF,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,wBAAwB,EACxB,qBAAqB,GACtB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,0BAA0B,EAC1B,6BAA6B,EAC7B,wBAAwB,EACxB,KAAK,oBAAoB,EACzB,wBAAwB,EACxB,0BAA0B,EAC1B,aAAa,EACb,KAAK,YAAY,EACjB,sBAAsB,EACtB,KAAK,kBAAkB,GACxB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EACL,WAAW,EACX,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,uBAAuB,EACvB,UAAU,GACX,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,KAAK,yBAAyB,GAC/B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACpB,oBAAoB,GACrB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACvB,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,KAAK,iBAAiB,EACtB,yBAAyB,EACzB,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EACV,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,eAAe,GAChB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/features/devices/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,KAAK,gBAAgB,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,EACL,wBAAwB,EACxB,KAAK,6BAA6B,GACnC,MAAM,+CAA+C,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,YAAY,EACV,mBAAmB,EACnB,4BAA4B,EAC5B,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,MAAM,GACP,MAAM,yCAAyC,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,wBAAwB,EACxB,qBAAqB,GACtB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,0BAA0B,EAC1B,6BAA6B,EAC7B,wBAAwB,EACxB,KAAK,oBAAoB,EACzB,wBAAwB,EACxB,0BAA0B,EAC1B,aAAa,EACb,KAAK,YAAY,EACjB,sBAAsB,EACtB,KAAK,kBAAkB,GACxB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EACL,WAAW,EACX,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,uBAAuB,EACvB,UAAU,GACX,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,KAAK,yBAAyB,GAC/B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACpB,oBAAoB,GACrB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACvB,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,KAAK,iBAAiB,EACtB,yBAAyB,EACzB,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EACV,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,eAAe,GAChB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/features/devices/index.js

@@ -4,7 +4,6 @@ import {
   DeviceSelectionModeRadio
 } from "./device-selector/device-selection-mode-radio.js";
 import { DeviceSelector } from "./device-selector/device-selector.js";
-import { DeviceSelectorSkeleton } from "./device-selector/device-selector-skeleton.js";
 import { EMPTY_NARROWING, narrowingToFilter } from "./device-selector/narrowing.js";
 import {
   getDeviceOperatingSystem,
@@ -62,7 +61,6 @@ export {
   DEVICE_VIEW_MODE_ITEMS,
   DeviceSelectionModeRadio,
   DeviceSelector,
-  DeviceSelectorSkeleton,
   DeviceTagsFilterButton,
   DeviceTypeTile,
   DevicesFilterToolbar,

package/dist/components/features/entity-tag-badges.d.ts

@@ -11,10 +11,9 @@ interface EntityTagBadgesProps {
     /** Cap visible badges from tablet width up (a phone shows at most `ENTITY_TAG_BADGES_PHONE_CAP`); the remainder
      *  collapse into a "+N" badge. */
     max?: number;
-    /** In a loading state with no `max`: how many tag boxes the row draws from tablet width up (default the row's fold). */
+    /** In a loading state with no `max`: how many tag boxes the row draws, at every width (default
+     *  `ENTITY_TAG_BADGES_SKELETON_COUNT`, a typical row). */
     skeletonCount?: number;
-    /** In a loading state with no `max`: how many tag boxes a phone's row draws (default `skeletonCount`). */
-    skeletonPhoneCount?: number;
     /** In a loading state: a host's typical tag label width (a sizing class) where its tags run longer or shorter than
      *  the default, so its skeleton row wraps where its typical row wraps. */
     skeletonItemClassName?: string;
@@ -30,22 +29,6 @@ export declare const ENTITY_TAG_BADGES_SKELETON_COUNT = 3;
  * same for every host; from tablet width up the row shows its `max`.
  */
 export declare const ENTITY_TAG_BADGES_PHONE_CAP = 2;
-/**
- * A tag row while its tags are read: `count` badge boxes of the tag badge's size (the row's fold from tablet width
- * up), and `phoneCount` below that width when a phone's row shows fewer (or more) before it wraps. Hosts pass their
- * row's layout fold (`<THING>_TAG_ROW_FOLD`); the default is `ENTITY_TAG_BADGES_SKELETON_COUNT`. `overflow` adds the
- * "+N" badge a row capped by `max` draws after its tags, and a capped row's phone count defaults to the phone cap
- * (`ENTITY_TAG_BADGES_PHONE_CAP`), as the loaded capped row shows.
- */
-export declare function EntityTagBadgesSkeleton({ count, overflow, phoneCount, className, itemClassName, }: {
-    count?: number;
-    phoneCount?: number;
-    overflow?: boolean;
-    className?: string;
-    /** A host's typical tag label width (a sizing class on each badge, in place of the default); the row keeps the
-     *  row's own classes. */
-    itemClassName?: string;
-}): import("react").JSX.Element;
-export declare function EntityTagBadges({ tags, basePath, max, skeletonCount, skeletonPhoneCount, skeletonItemClassName, className, }: EntityTagBadgesProps): import("react").JSX.Element | null;
+export declare function EntityTagBadges({ tags, basePath, max, skeletonCount, skeletonItemClassName, className, }: EntityTagBadgesProps): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=entity-tag-badges.d.ts.map

package/dist/components/features/entity-tag-badges.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"entity-tag-badges.d.ts","sourceRoot":"","sources":["../../../src/components/features/entity-tag-badges.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKjD,UAAU,oBAAoB;IAC5B,6EAA6E;IAC7E,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;sCACkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wHAAwH;IACxH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0GAA0G;IAC1G,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;8EAC0E;IAC1E,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,eAAO,MAAM,eAAe,yCAAyC,CAAC;AAiBtE,uEAAuE;AACvE,eAAO,MAAM,gCAAgC,IAAI,CAAC;AAUlD;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,IAAI,CAAC;AAI7C;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,KAAwC,EACxC,QAAgB,EAChB,UAA4E,EAC5E,SAAS,EACT,aAAa,GACd,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;6BACyB;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,+BA2BA;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,EACR,GAAG,EACH,aAAa,EACb,kBAAkB,EAClB,qBAAqB,EACrB,SAAS,GACV,EAAE,oBAAoB,sCA2DtB"}
+{"version":3,"file":"entity-tag-badges.d.ts","sourceRoot":"","sources":["../../../src/components/features/entity-tag-badges.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKjD,UAAU,oBAAoB;IAC5B,6EAA6E;IAC7E,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;sCACkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;8DAC0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;8EAC0E;IAC1E,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,eAAO,MAAM,eAAe,yCAAyC,CAAC;AAiBtE,uEAAuE;AACvE,eAAO,MAAM,gCAAgC,IAAI,CAAC;AAUlD;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,IAAI,CAAC;AAgD7C,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,EACR,GAAG,EACH,aAAa,EACb,qBAAqB,EACrB,SAAS,GACV,EAAE,oBAAoB,sCAsDtB"}

package/dist/components/features/entity-tag-badges.js

@@ -2,8 +2,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { cn } from "../../utils/cn.js";
-import { useLoadingScope } from "../ui/loading-scope.js";
-import { StatusBadge, StatusBadgeSkeleton } from "../ui/status-badge.js";
+import { LoadingItems, useLoadingScope } from "../ui/loading-scope.js";
+import { StatusBadge } from "../ui/status-badge.js";
 const TAG_BADGE_CLASS = "bg-ods-card border border-ods-border";
 const BADGE_CLASS = TAG_BADGE_CLASS;
 const TAG_ROW_CLASS = "flex w-full flex-wrap items-center gap-2";
@@ -16,25 +16,20 @@ const PAST_PHONE_CAP_CLASS = "hidden content-md:inline-flex";
 function EntityTagBadgesSkeleton({
   count = ENTITY_TAG_BADGES_SKELETON_COUNT,
   overflow = false,
-  phoneCount = overflow ? Math.min(count, ENTITY_TAG_BADGES_PHONE_CAP) : count,
   className,
   itemClassName
 }) {
   return /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: cn(TAG_ROW_CLASS, className), children: [
-    Array.from({ length: Math.max(count, phoneCount) }, (_, i) => /* @__PURE__ */ jsx(
-      "span",
+    /* @__PURE__ */ jsx(LoadingItems, { count, children: () => /* @__PURE__ */ jsx("span", { className: TAG_ITEM_CLASS, "data-loading-item": true, children: /* @__PURE__ */ jsx(
+      StatusBadge,
       {
-        className: cn(
-          TAG_ITEM_CLASS,
-          i >= phoneCount && "hidden content-md:inline-flex",
-          i >= count && "content-md:hidden"
-        ),
-        "data-loading-item": true,
-        children: /* @__PURE__ */ jsx(StatusBadgeSkeleton, { variant: "card", className: cn("border", itemClassName ?? TAG_SKELETON_WIDTH_CLASS) })
-      },
-      i
-    )),
-    overflow && /* @__PURE__ */ jsx("span", { className: TAG_ITEM_CLASS, "data-loading-item": true, children: /* @__PURE__ */ jsx(StatusBadgeSkeleton, { variant: "card", className: cn("border", OVERFLOW_BADGE_SKELETON_CLASS) }) })
+        loading: true,
+        text: "",
+        variant: "card",
+        className: cn("border", itemClassName ?? TAG_SKELETON_WIDTH_CLASS)
+      }
+    ) }) }),
+    overflow && /* @__PURE__ */ jsx("span", { className: TAG_ITEM_CLASS, "data-loading-item": true, children: /* @__PURE__ */ jsx(StatusBadge, { loading: true, text: "", variant: "card", className: cn("border", OVERFLOW_BADGE_SKELETON_CLASS) }) })
   ] });
 }
 function EntityTagBadges({
@@ -42,20 +37,11 @@ function EntityTagBadges({
   basePath,
   max,
   skeletonCount,
-  skeletonPhoneCount,
   skeletonItemClassName,
   className
 }) {
   if (useLoadingScope()) {
-    return max == null ? /* @__PURE__ */ jsx(
-      EntityTagBadgesSkeleton,
-      {
-        count: skeletonCount,
-        phoneCount: skeletonPhoneCount,
-        itemClassName: skeletonItemClassName,
-        className
-      }
-    ) : /* @__PURE__ */ jsx(EntityTagBadgesSkeleton, { count: max, overflow: true, itemClassName: skeletonItemClassName, className });
+    return max == null ? /* @__PURE__ */ jsx(EntityTagBadgesSkeleton, { count: skeletonCount, itemClassName: skeletonItemClassName, className }) : /* @__PURE__ */ jsx(EntityTagBadgesSkeleton, { count: max, overflow: true, itemClassName: skeletonItemClassName, className });
   }
   const items = (tags || []).filter((t) => !!t && !!t.name);
   if (items.length === 0) return null;
@@ -94,6 +80,5 @@ export {
   ENTITY_TAG_BADGES_PHONE_CAP,
   ENTITY_TAG_BADGES_SKELETON_COUNT,
   EntityTagBadges,
-  EntityTagBadgesSkeleton,
   TAG_BADGE_CLASS
 };

package/dist/components/features/entity-video-section.d.ts

@@ -67,13 +67,5 @@ export interface EntityVideoSectionProps {
     skeletonTabs?: boolean;
 }
 export declare function EntityVideoSection({ mainVideoUrl, youtubeUrl, highlightVideoUrl, highlightVideoThumbnail, mainVideoPoster, title, videoSummary, videoBites, bitesTitle, filterPublishedBites, bitesProfile, bitesHref, bitesHeaderSlot, onBiteNavigate, bitesAutoScroll, MarkdownRenderer, captionsUrl: captionsUrlProp, highlightCaptionsUrl: highlightCaptionsUrlProp, captionsEntity, priority, skeletonTabs, }: EntityVideoSectionProps): React.JSX.Element | null;
-/**
- * The video section while its record is read: the centered player box (`VideoSkeleton`), under the real static
- * "Full Video" / "Highlights" tab row when `tabs` (a record that has both). Its classes are the section's own.
- */
-export declare function EntityVideoSectionSkeleton({ tabs, className }: {
-    tabs?: boolean;
-    className?: string;
-}): React.JSX.Element;
 export {};
 //# sourceMappingURL=entity-video-section.d.ts.map

package/dist/components/features/entity-video-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"entity-video-section.d.ts","sourceRoot":"","sources":["../../../src/components/features/entity-video-section.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAOhE,OAAO,EAA6B,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7F,OAAO,EAAmB,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAwB/E,UAAU,qBAAqB;IAC7B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,qCAAqC;IACrC,uBAAuB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,iCAAiC;IACjC,UAAU,CAAC,EAAE,WAAW,EAAE,CAAC;IAC3B,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gEAAgE;IAChE,YAAY,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;IAC5C,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,uEAAuE;IACvE,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,6DAA6D;IAC7D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACxD,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC;;;;;;OAMG;IACH,cAAc,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC9D,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,uBAAuB,EACvB,eAAe,EACf,KAAe,EACf,YAAY,EACZ,UAAU,EACV,UAAsC,EACtC,oBAA2B,EAC3B,YAAmB,EACnB,SAAS,EACT,eAAe,EACf,cAAc,EACd,eAAsB,EACtB,gBAAgB,EAChB,WAAW,EAAE,eAAe,EAC5B,oBAAoB,EAAE,wBAAwB,EAC9C,cAAc,EACd,QAAgB,EAChB,YAAoB,GACrB,EAAE,uBAAuB,4BA6GzB;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,EAAE,IAAY,EAAE,SAAS,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAkB7G"}
+{"version":3,"file":"entity-video-section.d.ts","sourceRoot":"","sources":["../../../src/components/features/entity-video-section.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAOhE,OAAO,EAA6B,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7F,OAAO,EAAmB,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAwB/E,UAAU,qBAAqB;IAC7B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,qCAAqC;IACrC,uBAAuB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,iCAAiC;IACjC,UAAU,CAAC,EAAE,WAAW,EAAE,CAAC;IAC3B,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gEAAgE;IAChE,YAAY,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;IAC5C,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,uEAAuE;IACvE,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,6DAA6D;IAC7D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACxD,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC;;;;;;OAMG;IACH,cAAc,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC9D,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,uBAAuB,EACvB,eAAe,EACf,KAAe,EACf,YAAY,EACZ,UAAU,EACV,UAAsC,EACtC,oBAA2B,EAC3B,YAAmB,EACnB,SAAS,EACT,eAAe,EACf,cAAc,EACd,eAAsB,EACtB,gBAAgB,EAChB,WAAW,EAAE,eAAe,EAC5B,oBAAoB,EAAE,wBAAwB,EAC9C,cAAc,EACd,QAAgB,EAChB,YAAoB,GACrB,EAAE,uBAAuB,4BA6GzB"}

package/dist/components/features/entity-video-section.js

@@ -5,7 +5,7 @@ import { SECTION_HEADING_CLASS } from "../layout/page-heading.js";
 import { useLoadingScope } from "../ui/loading-scope.js";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs.js";
 import { useCaptions } from "./use-captions.js";
-import { Video, VideoSkeleton } from "./video.js";
+import { Video } from "./video.js";
 import { DEFAULT_VIDEO_BITES_TITLE } from "./video-bites-shared.js";
 import { VideoBitesStrip } from "./video-bites-strip.js";
 const VIDEO_TAB_LIST_CLASS = "inline-flex h-auto justify-start gap-0 rounded-none bg-transparent p-0";
@@ -118,16 +118,15 @@ function EntityVideoSection({
   ] });
 }
 function EntityVideoSectionSkeleton({ tabs = false, className }) {
-  if (!tabs) return /* @__PURE__ */ jsx(VideoSkeleton, { layout: "centered", className });
+  if (!tabs) return /* @__PURE__ */ jsx(Video, { loading: true, url: "", layout: "centered", className });
   return /* @__PURE__ */ jsxs(Tabs, { defaultValue: "full-video", className: cn("w-full", className), "aria-hidden": true, inert: true, children: [
     /* @__PURE__ */ jsxs(TabsList, { className: VIDEO_TAB_LIST_CLASS, children: [
       /* @__PURE__ */ jsx(TabsTrigger, { value: "full-video", className: VIDEO_TAB_TRIGGER_CLASS, children: FULL_VIDEO_TAB_LABEL }),
       /* @__PURE__ */ jsx(TabsTrigger, { value: "highlights", className: VIDEO_TAB_TRIGGER_CLASS, children: HIGHLIGHTS_TAB_LABEL })
     ] }),
-    /* @__PURE__ */ jsx(TabsContent, { value: "full-video", className: VIDEO_TAB_CONTENT_CLASS, children: /* @__PURE__ */ jsx(VideoSkeleton, { layout: "centered" }) })
+    /* @__PURE__ */ jsx(TabsContent, { value: "full-video", className: VIDEO_TAB_CONTENT_CLASS, children: /* @__PURE__ */ jsx(Video, { loading: true, url: "", layout: "centered" }) })
   ] });
 }
 export {
-  EntityVideoSection,
-  EntityVideoSectionSkeleton
+  EntityVideoSection
 };