@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/src/components/features/devices/devices-table-columns.tsx

@@ -4,6 +4,7 @@ import type React from 'react';
 import { type MouseEvent, type ReactNode, useMemo } from 'react';
 import { formatDate, formatTime } from '../../../utils/format-date';
 import { ArrowRightUpIcon } from '../../icons-v2-generated';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
 import {
   Button,
   type ColumnDef,
@@ -16,7 +17,9 @@ import {
   Tag,
   TruncateText,
   useDataTable,
+  useLoadingScope,
 } from '../../ui';
+import { DATA_TABLE_SKELETON_ROWS } from '../../ui/data-table/utils';
 import { OSTypeBadge } from '../os-type-badge';
 import { getDeviceName } from './device-name';
 import { getDeviceStatusConfig } from './device-status';
@@ -69,7 +72,9 @@ export function getDeviceActionsColumn<T extends DeviceRow = DeviceRow>(
 /** Opens the device's page in a new tab. A button, because the row is itself a link and a link cannot hold a link. */
 function OpenDeviceButton({ device }: { device: DeviceRow }) {
   const { getDeviceHref } = useDevicesViewConfig();
-  const href = getDeviceHref?.(device);
+  // The button is static chrome: drawn real while the row is read, and inert.
+  const loading = useLoadingScope();
+  const href = loading ? undefined : getDeviceHref?.(device);
   const open = (event: MouseEvent) => {
     event.preventDefault();
     if (href) window.open(href, '_blank', 'noopener,noreferrer');
@@ -83,6 +88,7 @@ function OpenDeviceButton({ device }: { device: DeviceRow }) {
         leftIcon={<ArrowRightUpIcon className="h-5 w-5" />}
         aria-label="Open in new tab"
         className="bg-ods-card"
+        disabled={loading}
       />
     </div>
   );
@@ -138,13 +144,19 @@ export interface DevicesTableBodyProps<T extends DeviceRow = DeviceRow> {
   showHeader?: boolean;
 }
 
+/** One page of rows still being read: an id each, and nothing a cell can show (every cell draws its loading form). */
+function deviceLoadingRows<T extends DeviceRow>(count: number): T[] {
+  // A row the table can key: the fields a device row requires, empty. The cells read nothing else.
+  return Array.from({ length: count }, (_, index) => ({ id: `loading-${index}`, machineId: '', status: '' }) as T);
+}
+
 export function DevicesTableBody<T extends DeviceRow = DeviceRow>({
   devices,
   isLoading,
   loadingRegion,
   emptyState,
   emptyMessage = 'No devices found.',
-  skeletonRows = 10,
+  skeletonRows,
   stickyHeaderOffset,
   footerSlot,
   deviceFilters,
@@ -168,8 +180,15 @@ export function DevicesTableBody<T extends DeviceRow = DeviceRow>({
     return actionsColumn ? [...base, actionsColumn, open] : [...base, open];
   }, [deviceFilters, filtersPending, actionsColumn, hideColumns, disableColumnFilters]);
 
+  // While loading the table holds one page of empty rows, drawn with the real cells: every part of a row draws its
+  // own loading form (`DataTable.Body`'s `loadingCells`), so a loading row is the loaded row's own layout.
+  const loadingRows = useMemo(
+    () => (isLoading ? deviceLoadingRows<T>(skeletonRows ?? DATA_TABLE_SKELETON_ROWS) : null),
+    [isLoading, skeletonRows],
+  );
+
   const table = useDataTable<T>({
-    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),
@@ -184,11 +203,12 @@ export function DevicesTableBody<T extends DeviceRow = DeviceRow>({
         <DataTable.Header
           stickyHeader={!!stickyHeaderOffset}
           stickyHeaderOffset={stickyHeaderOffset}
-          rightSlot={<DataTable.RowCount itemName="device" totalCount={totalCount} />}
+          rightSlot={<DataTable.RowCount itemName="device" totalCount={totalCount} loading={isLoading} />}
         />
       )}
       <DataTable.Body
         loading={isLoading}
+        loadingCells
         loadingRegion={loadingRegion}
         skeletonRows={skeletonRows}
         emptyState={emptyState}
@@ -208,12 +228,28 @@ function OrganizationCell({ device }: { device: DeviceRow }) {
     <div className="flex items-center gap-3">
       <EntityImage src={fullImageUrl} alt={device.organization || 'Customer'} className="size-12 content-md:size-12" />
       <div className="flex min-w-0 flex-1 flex-col justify-center">
-        <span className="break-words text-ods-text-primary text-h4">{device.organization || ''}</span>
+        <OrganizationName name={device.organization} />
       </div>
     </div>
   );
 }
 
+/** The customer's name; a bar while the row is read. */
+function OrganizationName({ name }: { name: string | undefined }) {
+  if (useLoadingScope() && !name) return <TextLineSkeleton type="h4" className="w-3/4" />;
+  return <span className="break-words text-ods-text-primary text-h4">{name || ''}</span>;
+}
+
+/** When the device was last seen, under its status; a bar while the row is read. */
+function DeviceLastSeen({ lastSeen }: { lastSeen: string | undefined }) {
+  if (useLoadingScope() && !lastSeen) return <TextLineSkeleton type="h6" className="hidden w-24 content-md:block" />;
+  return (
+    <span className="hidden text-ods-text-secondary text-h6 content-md:flex">
+      {lastSeen ? formatDateTime(lastSeen) : 'Never'}
+    </span>
+  );
+}
+
 export interface DeviceFilterColumn {
   key: string;
   label: string;
@@ -316,9 +352,7 @@ export function getDeviceTableColumns<T extends DeviceRow = DeviceRow>(
             <div className="inline-flex">
               <Tag label={statusConfig.label} variant={statusConfig.variant} />
             </div>
-            <span className="hidden text-ods-text-secondary text-h6 content-md:flex">
-              {device.last_seen ? formatDateTime(device.last_seen) : 'Never'}
-            </span>
+            <DeviceLastSeen lastSeen={device.last_seen} />
           </div>
         );
       },

package/src/components/features/devices/index.ts

@@ -15,7 +15,6 @@ export type {
   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,

package/src/components/features/entity-tag-badges.tsx

@@ -3,8 +3,8 @@
 import Link from 'next/link';
 import type { TagAssoc } from '../../types/blog';
 import { cn } from '../../utils/cn';
-import { useLoadingScope } from '../ui/loading-scope';
-import { StatusBadge, StatusBadgeSkeleton } from '../ui/status-badge';
+import { LoadingItems, useLoadingScope } from '../ui/loading-scope';
+import { StatusBadge } from '../ui/status-badge';
 
 interface EntityTagBadgesProps {
   /** Flat `<entity>_tags[]` association array (from entity_tags hydration). */
@@ -18,10 +18,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;
@@ -71,21 +70,17 @@ export const ENTITY_TAG_BADGES_PHONE_CAP = 2;
 const PAST_PHONE_CAP_CLASS = 'hidden content-md:inline-flex';
 
 /**
- * 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.
+ * A tag row while its tags are read: `count` badge boxes of the tag badge's size, the same count at every width (a
+ * skeleton never hides items per breakpoint). Hosts pass their row's typical count; the default is
+ * `ENTITY_TAG_BADGES_SKELETON_COUNT`. `overflow` adds the "+N" badge a row capped by `max` draws after its tags.
  */
-export function EntityTagBadgesSkeleton({
+function EntityTagBadgesSkeleton({
   count = ENTITY_TAG_BADGES_SKELETON_COUNT,
   overflow = false,
-  phoneCount = overflow ? Math.min(count, ENTITY_TAG_BADGES_PHONE_CAP) : count,
   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
@@ -94,26 +89,24 @@ export function EntityTagBadgesSkeleton({
 }) {
   return (
     <div aria-hidden className={cn(TAG_ROW_CLASS, className)}>
-      {Array.from({ length: Math.max(count, phoneCount) }, (_, i) => (
-        <span
-          // biome-ignore lint/suspicious/noArrayIndexKey: skeleton badges never reorder
-          key={i}
-          className={cn(
-            TAG_ITEM_CLASS,
-            i >= phoneCount && 'hidden content-md:inline-flex',
-            i >= count && 'content-md:hidden',
-          )}
-          data-loading-item
-        >
-          {/* The loaded badge's 1px border (its colours are the skeleton's). */}
-          {/* The label's typical width: the host's (`itemClassName`), else the default. */}
-          <StatusBadgeSkeleton variant="card" className={cn('border', itemClassName ?? TAG_SKELETON_WIDTH_CLASS)} />
-        </span>
-      ))}
+      <LoadingItems count={count}>
+        {() => (
+          <span className={TAG_ITEM_CLASS} data-loading-item>
+            {/* The loaded badge's 1px border (its colours are the skeleton's). */}
+            {/* The label's typical width: the host's (`itemClassName`), else the default. */}
+            <StatusBadge
+              loading
+              text=""
+              variant="card"
+              className={cn('border', itemClassName ?? TAG_SKELETON_WIDTH_CLASS)}
+            />
+          </span>
+        )}
+      </LoadingItems>
       {/* The "+N" badge counts the tags left out: read data, so it is one of the list's items. */}
       {overflow && (
         <span className={TAG_ITEM_CLASS} data-loading-item>
-          <StatusBadgeSkeleton variant="card" className={cn('border', OVERFLOW_BADGE_SKELETON_CLASS)} />
+          <StatusBadge loading text="" variant="card" className={cn('border', OVERFLOW_BADGE_SKELETON_CLASS)} />
         </span>
       )}
     </div>
@@ -125,7 +118,6 @@ export function EntityTagBadges({
   basePath,
   max,
   skeletonCount,
-  skeletonPhoneCount,
   skeletonItemClassName,
   className,
 }: EntityTagBadgesProps) {
@@ -133,12 +125,7 @@ export function EntityTagBadges({
   // takes the lines a typical capped row takes, and a loaded tag is never cut to fit it.
   if (useLoadingScope()) {
     return max == null ? (
-      <EntityTagBadgesSkeleton
-        count={skeletonCount}
-        phoneCount={skeletonPhoneCount}
-        itemClassName={skeletonItemClassName}
-        className={className}
-      />
+      <EntityTagBadgesSkeleton count={skeletonCount} itemClassName={skeletonItemClassName} className={className} />
     ) : (
       <EntityTagBadgesSkeleton count={max} overflow itemClassName={skeletonItemClassName} className={className} />
     );

package/src/components/features/entity-video-section.tsx

@@ -8,7 +8,7 @@ import { SECTION_HEADING_CLASS } from '../layout/page-heading';
 import { useLoadingScope } from '../ui/loading-scope';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/tabs';
 import { useCaptions } from './use-captions';
-import { Video, VideoSkeleton } from './video';
+import { Video } from './video';
 import { DEFAULT_VIDEO_BITES_TITLE, type VideoBiteStripProfile } from './video-bites-shared';
 import { VideoBitesStrip, type VideoBiteStripItem } from './video-bites-strip';
 
@@ -230,11 +230,11 @@ export function EntityVideoSection({
 }
 
 /**
- * The video section while its record is read: the centered player box (`VideoSkeleton`), under the real static
+ * The video section while its record is read: the centered player box (`Video loading`), under the real static
  * "Full Video" / "Highlights" tab row when `tabs` (a record that has both). Its classes are the section's own.
  */
-export function EntityVideoSectionSkeleton({ tabs = false, className }: { tabs?: boolean; className?: string }) {
-  if (!tabs) return <VideoSkeleton layout="centered" className={className} />;
+function EntityVideoSectionSkeleton({ tabs = false, className }: { tabs?: boolean; className?: string }) {
+  if (!tabs) return <Video loading url="" layout="centered" className={className} />;
   // The real tabs (static labels): TabsTrigger draws its own box in a scope. `inert`: nothing in it can be focused or clicked.
   return (
     <Tabs defaultValue="full-video" className={cn('w-full', className)} aria-hidden inert>
@@ -247,7 +247,7 @@ export function EntityVideoSectionSkeleton({ tabs = false, className }: { tabs?:
         </TabsTrigger>
       </TabsList>
       <TabsContent value="full-video" className={VIDEO_TAB_CONTENT_CLASS}>
-        <VideoSkeleton layout="centered" />
+        <Video loading url="" layout="centered" />
       </TabsContent>
     </Tabs>
   );

package/src/components/features/filters-dropdown.tsx

@@ -388,19 +388,17 @@ export const FiltersDropdown: FC<FiltersDropdownProps> = ({
           {triggerElement}
         </div>
       ) : (
-        <button
+        <Button
+          variant="link"
+          size="compact"
+          noPaddingX
           ref={triggerRef as RefObject<HTMLButtonElement>}
           onClick={() => setIsOpen(!isOpen)}
-          className={cn(
-            'flex items-center gap-1.5 transition-colors text-h5',
-            getActiveFiltersCount() > 0
-              ? 'text-ods-accent hover:text-ods-accent/80'
-              : 'text-ods-text-secondary hover:text-ods-text-primary',
-          )}
+          aria-expanded={isOpen}
         >
-          {triggerLabel}
+          <span className="text-h5">{triggerLabel}</span>
           {getActiveFiltersCount() > 0 && <span className="size-1.5 rounded-full bg-ods-accent" />}
-        </button>
+        </Button>
       )}
 
       {/* Dropdown Panel — kept mounted briefly on close to play exit transition. */}
@@ -433,17 +431,19 @@ export const FiltersDropdown: FC<FiltersDropdownProps> = ({
                     <div className="sticky top-0 z-10 flex items-center justify-between bg-ods-bg pb-2">
                       <h3 className="text-ods-text-secondary text-h5">{section.title}</h3>
                       {section.allowSelectAll && section.type === 'checkbox' && (
-                        <button
+                        <Button
+                          variant="link"
+                          size="compact"
+                          noPaddingX
                           onClick={() => handleSelectAll(section.id, section)}
-                          className="text-ods-text-secondary underline transition-colors text-h6 hover:text-ods-text-primary"
                         >
                           {allSelected ? 'Deselect All' : 'Select All'}
-                        </button>
+                        </Button>
                       )}
                     </div>
 
                     {/* Options Container */}
-                    <div className="overflow-hidden rounded-md border border-ods-border bg-ods-bg">
+                    <div className="divide-y divide-ods-border overflow-hidden rounded-md border border-ods-border bg-ods-bg">
                       {section.options.map((option, index) => {
                         // Handle separator type
                         if (option.type === 'separator') {
@@ -453,19 +453,14 @@ export const FiltersDropdown: FC<FiltersDropdownProps> = ({
                         }
 
                         const isSelected = sectionSelection.includes(option.id);
-                        const isLast = index === section.options.length - 1;
 
                         return (
-                          <button
+                          <Button
+                            variant="row"
                             type="button"
                             key={`${section.id}-${option.id}-${index}`}
                             onClick={() => handleToggleOption(section.id, option.id, section.type)}
-                            className={cn(
-                              'flex w-full items-center gap-[var(--spacing-system-s)] p-[var(--spacing-system-s)] text-left',
-                              isSelected ? 'bg-ods-bg-surface' : 'bg-ods-bg',
-                              !isLast && 'border-b border-ods-border',
-                              'transition-colors hover:bg-ods-bg-hover',
-                            )}
+                            data-state={isSelected ? 'active' : undefined}
                           >
                             <FilterCheckbox checked={isSelected} />
                             <span
@@ -479,7 +474,7 @@ export const FiltersDropdown: FC<FiltersDropdownProps> = ({
                                 {option.count.toLocaleString()}
                               </span>
                             )}
-                          </button>
+                          </Button>
                         );
                       })}
                     </div>

package/src/components/features/highlight-video-section.tsx

@@ -216,16 +216,18 @@ export function HighlightVideoSection({
                 <Video kind="file" url={highlightVideoUrl} poster={highlightVideoThumbnail || undefined} />
               </div>
               {onDeleteHighlight && (
-                <button
+                <Button
+                  variant="overlay"
+                  size="icon-sm"
                   type="button"
+                  aria-label="Delete"
                   onClick={onDeleteHighlight}
-                  className="absolute right-2 top-2 rounded-full bg-black/60 p-1.5 transition-colors hover:bg-black/80"
+                  className="absolute right-2 top-2"
                 >
-                  <span className="sr-only">Delete</span>
-                  <svg className="h-4 w-4 text-ods-text-on-dark" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                   </svg>
-                </button>
+                </Button>
               )}
             </div>
           )

package/src/components/features/knowledge-base/knowledge-base-table.tsx

@@ -4,8 +4,11 @@ import { type ReactNode, useMemo } from 'react';
 import { formatDate, formatTime } from '../../../utils/format-date';
 import { openInNewTab } from '../../../utils/open-in-new-tab';
 import { ArrowRightUpIcon } from '../../icons-v2-generated';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
 import { Button } from '../../ui/button/button';
-import { type ColumnDef, DataTable, type Row, useDataTable } from '../../ui/data-table';
+import { type ColumnDef, DataTable, dataTableLoadingRows, type Row, useDataTable } from '../../ui/data-table';
+import { DATA_TABLE_SKELETON_ROWS } from '../../ui/data-table/utils';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { Tag as StatusTag } from '../../ui/tag';
 import { TruncateText } from '../../ui/truncate-text';
 import { KNOWLEDGE_BASE_ITEM_ICON } from './knowledge-base-item-icon';
@@ -28,6 +31,79 @@ export interface KnowledgeBaseRow {
 
 export type KnowledgeBaseTableMode = 'standard' | 'archive';
 
+/** A row still being read: an article, every field a cell shows empty (each cell draws its loading form). */
+const loadingItem = (id: string): KnowledgeBaseRow => ({ id, type: 'ARTICLE', name: '' });
+
+/** The "open in new tab" button: static chrome, drawn real and inert while the row is read. */
+function KnowledgeBaseOpenButton({ href }: { href: string }) {
+  const loading = useLoadingScope();
+  return (
+    <div data-no-row-click className="pointer-events-auto flex items-center justify-end">
+      <Button
+        onClick={loading ? undefined : openInNewTab(href)}
+        disabled={loading}
+        variant="outline"
+        size="icon"
+        leftIcon={<ArrowRightUpIcon className="h-5 w-5" />}
+        aria-label="Open in new tab"
+        className="bg-ods-card"
+      />
+    </div>
+  );
+}
+
+/** The Name cell: the item's icon, its name and status, and an article's summary; bars while the row is read. */
+function KnowledgeBaseNameCell({ item }: { item: KnowledgeBaseRow }) {
+  const loading = useLoadingScope();
+  const Icon = item.type === 'FOLDER' ? KNOWLEDGE_BASE_ITEM_ICON.FOLDER : KNOWLEDGE_BASE_ITEM_ICON.ARTICLE;
+  const status = item.status as 'DRAFT' | 'PUBLISHED' | 'ARCHIVED' | null | undefined;
+  const tagStatus = status === 'DRAFT' || status === 'ARCHIVED' ? status : null;
+  return (
+    <div className="relative box-border flex h-20 w-full shrink-0 content-stretch items-center justify-start gap-[var(--spacing-system-m)] py-0">
+      <div className="relative flex h-8 w-8 shrink-0 items-center justify-center rounded-[6px] border border-ods-border">
+        <Icon size={16} className="shrink-0 text-ods-text-secondary" />
+      </div>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <div className="flex min-w-0 items-center gap-[var(--spacing-system-xsf)]">
+          {/* min-w-0 wrapper so the FloatingTooltip trigger div can shrink and the name ellipsizes. */}
+          <div className="min-w-0">
+            <TruncateText>{item.name}</TruncateText>
+          </div>
+          {tagStatus && (
+            <StatusTag variant={KNOWLEDGE_BASE_STATUS_VARIANT[tagStatus]} label={tagStatus} className="shrink-0" />
+          )}
+        </div>
+        {item.type === 'ARTICLE' && (item.summary || loading) && (
+          <TruncateText variant="h6" tone="secondary">
+            {item.summary ?? ''}
+          </TruncateText>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** The date cell: an article's date over its time; two bars while the row is read. */
+function KnowledgeBaseDateCell({ item, mode }: { item: KnowledgeBaseRow; mode: KnowledgeBaseTableMode }) {
+  if (useLoadingScope()) {
+    return (
+      <div className="flex flex-col whitespace-nowrap">
+        <TextLineSkeleton type="h4" className="w-24" />
+        <TextLineSkeleton type="h5" className="w-16" />
+      </div>
+    );
+  }
+  if (item.type !== 'ARTICLE') return null;
+  const ts = mode === 'archive' ? (item.updatedAt ?? item.createdAt) : item.createdAt;
+  if (!ts) return null;
+  return (
+    <div className="flex flex-col whitespace-nowrap">
+      <span className="text-ods-text-primary text-h4">{formatDate(ts)}</span>
+      <span className="text-heading-5 text-ods-text-secondary">{formatTime(ts)}</span>
+    </div>
+  );
+}
+
 /** Where a row leads: the article's page, or the folder's listing. */
 export type KnowledgeBaseRowHref = (item: KnowledgeBaseRow) => string;
 
@@ -40,18 +116,7 @@ export type KnowledgeBaseRowHref = (item: KnowledgeBaseRow) => string;
 export function getKnowledgeBaseOpenColumn(getHref: KnowledgeBaseRowHref): ColumnDef<KnowledgeBaseRow> {
   return {
     id: 'open',
-    cell: ({ row }: { row: Row<KnowledgeBaseRow> }) => (
-      <div data-no-row-click className="pointer-events-auto flex items-center justify-end">
-        <Button
-          onClick={openInNewTab(getHref(row.original))}
-          variant="outline"
-          size="icon"
-          leftIcon={<ArrowRightUpIcon className="h-5 w-5" />}
-          aria-label="Open in new tab"
-          className="bg-ods-card"
-        />
-      </div>
-    ),
+    cell: ({ row }: { row: Row<KnowledgeBaseRow> }) => <KnowledgeBaseOpenButton href={getHref(row.original)} />,
     enableSorting: false,
     meta: { width: 'w-12 shrink-0 flex-none', hideAt: 'md', align: 'right' },
   };
@@ -62,56 +127,14 @@ export function getKnowledgeBaseColumns(mode: KnowledgeBaseTableMode): ColumnDef
     {
       accessorKey: 'name',
       header: 'Name',
-      cell: ({ row }: { row: Row<KnowledgeBaseRow> }) => {
-        const item = row.original;
-        const Icon = item.type === 'FOLDER' ? KNOWLEDGE_BASE_ITEM_ICON.FOLDER : KNOWLEDGE_BASE_ITEM_ICON.ARTICLE;
-        const status = item.status as 'DRAFT' | 'PUBLISHED' | 'ARCHIVED' | null | undefined;
-        const tagStatus = status === 'DRAFT' || status === 'ARCHIVED' ? status : null;
-        return (
-          <div className="relative box-border flex h-20 w-full shrink-0 content-stretch items-center justify-start gap-[var(--spacing-system-m)] py-0">
-            <div className="relative flex h-8 w-8 shrink-0 items-center justify-center rounded-[6px] border border-ods-border">
-              <Icon size={16} className="shrink-0 text-ods-text-secondary" />
-            </div>
-            <div className="flex min-w-0 flex-1 flex-col">
-              <div className="flex min-w-0 items-center gap-[var(--spacing-system-xsf)]">
-                {/* min-w-0 wrapper so the FloatingTooltip trigger div can shrink and the name ellipsizes. */}
-                <div className="min-w-0">
-                  <TruncateText>{item.name}</TruncateText>
-                </div>
-                {tagStatus && (
-                  <StatusTag
-                    variant={KNOWLEDGE_BASE_STATUS_VARIANT[tagStatus]}
-                    label={tagStatus}
-                    className="shrink-0"
-                  />
-                )}
-              </div>
-              {item.type === 'ARTICLE' && item.summary && (
-                <TruncateText variant="h6" tone="secondary">
-                  {item.summary}
-                </TruncateText>
-              )}
-            </div>
-          </div>
-        );
-      },
+      cell: ({ row }: { row: Row<KnowledgeBaseRow> }) => <KnowledgeBaseNameCell item={row.original} />,
       enableSorting: false,
       meta: { width: 'flex-1 min-w-0' },
     },
     {
       accessorKey: mode === 'archive' ? 'updatedAt' : 'createdAt',
       header: mode === 'archive' ? 'Archived' : 'Created',
-      cell: ({ row }: { row: Row<KnowledgeBaseRow> }) => {
-        if (row.original.type !== 'ARTICLE') return null;
-        const ts = mode === 'archive' ? (row.original.updatedAt ?? row.original.createdAt) : row.original.createdAt;
-        if (!ts) return null;
-        return (
-          <div className="flex flex-col whitespace-nowrap">
-            <span className="text-ods-text-primary text-h4">{formatDate(ts)}</span>
-            <span className="text-heading-5 text-ods-text-secondary">{formatTime(ts)}</span>
-          </div>
-        );
-      },
+      cell: ({ row }: { row: Row<KnowledgeBaseRow> }) => <KnowledgeBaseDateCell item={row.original} mode={mode} />,
       enableSorting: false,
       meta: { width: 'w-[140px]', hideAt: 'lg' },
     },
@@ -159,8 +182,14 @@ export function KnowledgeBaseTableBody({
     return actionsColumn ? [...leading, actionsColumn, ...trailing] : [...leading, ...trailing];
   }, [mode, actionsColumn, getHref, compact]);
 
+  // While loading the table holds one page of placeholder rows, drawn with the real cells (`loadingCells`).
+  const loading = useLoadingScope() || !!isLoading;
+  const loadingRows = useMemo(
+    () => (loading ? dataTableLoadingRows(skeletonRows ?? DATA_TABLE_SKELETON_ROWS, loadingItem) : null),
+    [loading, skeletonRows],
+  );
   const table = useDataTable<KnowledgeBaseRow>({
-    data: items,
+    data: loadingRows ?? items,
     columns,
     getRowId: row => row.id,
     enableSorting: false,
@@ -171,9 +200,21 @@ export function KnowledgeBaseTableBody({
       <DataTable.Header
         stickyHeader={!!stickyHeaderOffset}
         stickyHeaderOffset={stickyHeaderOffset}
-        rightSlot={<DataTable.RowCount itemName={mode === 'archive' ? 'article' : 'item'} totalCount={totalCount} />}
+        rightSlot={
+          <DataTable.RowCount
+            itemName={mode === 'archive' ? 'article' : 'item'}
+            totalCount={totalCount}
+            loading={loading}
+          />
+        }
+      />
+      <DataTable.Body
+        loading={loading}
+        loadingCells
+        skeletonRows={skeletonRows}
+        emptyMessage={emptyMessage}
+        rowHref={getHref}
       />
-      <DataTable.Body loading={isLoading} skeletonRows={skeletonRows} emptyMessage={emptyMessage} rowHref={getHref} />
       {footerSlot}
     </DataTable>
   );

package/src/components/features/logs/index.ts

@@ -7,8 +7,8 @@ export type { LogSourceLabels } from './log-source-labels';
 export { LogCopyIconButton, LogsPageView } from './logs-page-view';
 export type { LogCopyIconButtonProps, LogsPageViewProps } from './logs-page-view';
 export { LOG_COLUMN_WIDTHS } from './logs-table-columns';
-export { LogsTableSkeleton, LogsTableView } from './logs-table-view';
-export type { LogsTableGuideButton, LogsTableSkeletonProps, LogsTableViewProps } from './logs-table-view';
+export { LogsTableView } from './logs-table-view';
+export type { LogsTableGuideButton, LogsTableViewProps } from './logs-table-view';
 export { logSeverityVariant } from './types';
 export type {
   LogsTableColumnId,

package/src/components/features/logs/logs-page-view.tsx

@@ -55,6 +55,7 @@ export function LogsPageView({
       {!hideSearch && (
         <div className="sticky top-0 z-20 -my-[var(--spacing-system-l)] flex items-center gap-[var(--spacing-system-m)] bg-ods-bg py-[var(--spacing-system-l)]">
           <Input
+            userValue
             placeholder="Search for Logs"
             value={search}
             onChange={e => onSearchChange(e.target.value)}

package/src/components/features/logs/logs-table-columns.ts

@@ -1,7 +1,6 @@
 /**
- * Column widths of the logs table. Data-only, read by the live table and by
- * `LogsTableSkeleton`, so the header row cannot drift from the rows it stands in
- * for and a width is changed in one place.
+ * Column widths of the logs table. Data-only, read by the table's columns (loaded and loading alike, the table
+ * draws its own skeleton rows), so a width is changed in one place.
  */
 export const LOG_COLUMN_WIDTHS = {
   logId: 'w-[200px]',