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

package/src/components/ui/data-table/data-table-infinite-footer.tsx

@@ -4,10 +4,12 @@ import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { useIsomorphicLayoutEffect } from '../../../hooks/ui/use-isomorphic-layout-effect';
 import { LoadingRegion } from '../../loading/loading-region';
 import { Button } from '../button';
+import { LoadingItems } from '../loading-scope';
 import { useOptionalDataTableContext } from './data-table';
 import { useDataTableLoadMoreStore } from './data-table-load-more';
-import { DataTableSkeleton, ROW_STACK_CLASSES } from './data-table-skeleton';
-import { dataTablePageSize } from './utils';
+import { DataTableRow } from './data-table-row';
+import { ROW_STACK_CLASSES } from './data-table-row-classes';
+import { DATA_TABLE_NEXT_PAGE_SKELETON_ROWS, dataTablePageSize } from './utils';
 
 export interface DataTableInfiniteFooterProps {
   hasNextPage: boolean;
@@ -111,11 +113,12 @@ export function DataTableInfiniteFooter({
   });
 
   const table = useOptionalDataTableContext();
-  const skeletonRows = skeletonRowsProp ?? (table ? dataTablePageSize(table) : undefined) ?? 3;
+  const pageSize =
+    skeletonRowsProp ?? (table ? dataTablePageSize(table) : undefined) ?? DATA_TABLE_NEXT_PAGE_SKELETON_ROWS;
 
   const loadMore = useDataTableLoadMoreStore();
   const bodyDrawsRows = useSyncExternalStore(loadMore.subscribe, loadMore.getHasRowsBody, getNoBody);
-  const requestedRows = isFetchingNextPage ? skeletonRows : 0;
+  const requestedRows = isFetchingNextPage ? pageSize : 0;
   // A layout effect, so the body's re-render lands before paint: no frame
   // between "fetching" and the rows appearing.
   useIsomorphicLayoutEffect(() => {
@@ -173,7 +176,9 @@ export function DataTableInfiniteFooter({
       {isFetchingNextPage && !bodyDrawsRows && (
         // Busy, without a second status: the footer's own one below says "Loading more results".
         <LoadingRegion status={false} className={ROW_STACK_CLASSES}>
-          <DataTableSkeleton rows={skeletonRows} />
+          <LoadingItems count={pageSize}>
+            {index => <DataTableRow row={null} loadingIndex={index} data-loading-item />}
+          </LoadingItems>
         </LoadingRegion>
       )}
       {isStalled && (

package/src/components/ui/data-table/data-table-reserved-rows.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../../../utils/cn';
+import { LoadingItems } from '../loading-scope';
+import {
+  DATA_TABLE_PAD_ROW_FRAME_CLASS,
+  ROW_DESKTOP_SHELL_CLASS,
+  ROW_HEIGHT_DESKTOP,
+  ROW_HEIGHT_MOBILE,
+  ROW_MOBILE_SHELL_CLASS,
+  ROW_SHELL_CLASSES,
+} from './data-table-row-classes';
+
+/**
+ * The empty state, floating centred over a full page's worth of reserved row
+ * slots. `DataTable.Body` renders this — an empty table is exactly when a
+ * collapsing one is most visible (the pagination and everything under it jump
+ * the moment a filter matches nothing), so the body reserves the page's slots.
+ */
+export function ReservedEmptyState({
+  count,
+  gapClassName,
+  rowHeightClassName,
+  children,
+}: {
+  count: number;
+  gapClassName: string;
+  rowHeightClassName?: string;
+  children: ReactNode;
+}) {
+  // ONE grid cell holds both layers, so the box is as tall as the TALLER of
+  // the two: a short reservation (three compact rows) never clips the empty
+  // state, and a tall one still reserves its slots. The former absolute
+  // overlay took no height of its own, so a message taller than the slots
+  // spilled out of the host's horizontal scroller and grew it a vertical
+  // scrollbar — the header scrolled away inside a section.
+  return (
+    <div className="grid w-full">
+      <div className={cn('flex w-full flex-col [grid-area:1/1]', gapClassName)}>
+        <PlaceholderRows count={count} rowHeightClassName={rowHeightClassName} />
+      </div>
+      {/* `sticky left-0` + `w-screen max-w-full`: hosts wrap tables in a
+          horizontal scroller with a forced min-width, and an overlay centred on
+          that CANVAS puts the message off-screen on a phone. This centres it on
+          the visible area instead, and collapses to plain centring when the
+          table is not wider than its container. */}
+      <div className="flex items-center [grid-area:1/1]">
+        <div className="sticky left-0 flex w-screen max-w-full justify-center">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Invisible rows that occupy exactly one row slot each.
+ *
+ * THE height reservation for a table whose page is short or empty — every call
+ * site uses it (`DataTable.Body`'s pad and empty branches), so
+ * a padded page and an empty one are the same height by construction rather
+ * than by matching guesses in each component.
+ */
+export function PlaceholderRows({
+  count,
+  rowHeightClassName,
+}: {
+  count: number;
+  /** Height on the CARD, as `DataTableRow` carries it. */
+  rowHeightClassName?: string;
+}) {
+  return (
+    // loading-standard-ok(ITEM_MARK): pad slots that reserve a short page's height in the LOADED table, not items
+    <LoadingItems count={count}>
+      {() => (
+        <div
+          // `border-transparent`, not no border: a real row card draws a 1px
+          // border on each side, so its outer block is the inner height PLUS 2.
+          // A pad row without one is 2px shorter than the row it stands in for
+          // — invisible per row, 54px over a 27-row remainder, which is the
+          // same shift `minRows` exists to prevent.
+          className={cn(
+            DATA_TABLE_PAD_ROW_FRAME_CLASS,
+            // The stated slot height belongs on the CARD, exactly as a real
+            // row carries it — a real row with a sub-row is taller than its
+            // cells, so reserving the cells' height here left every pad row
+            // short by the sub-row.
+            rowHeightClassName,
+          )}
+          aria-hidden="true"
+        >
+          <div
+            className={cn(
+              ROW_DESKTOP_SHELL_CLASS,
+              'py-0',
+              ROW_SHELL_CLASSES,
+              rowHeightClassName ? 'h-full' : ROW_HEIGHT_DESKTOP,
+            )}
+          />
+          <div
+            className={cn(
+              ROW_MOBILE_SHELL_CLASS,
+              'py-0',
+              ROW_SHELL_CLASSES,
+              rowHeightClassName ? 'h-full' : ROW_HEIGHT_MOBILE,
+            )}
+          />
+        </div>
+      )}
+    </LoadingItems>
+  );
+}

package/src/components/ui/data-table/data-table-row-classes.ts

@@ -0,0 +1,48 @@
+/**
+ * THE table-row class set: the frame, heights and shells a data-table row is drawn with, loaded and loading. Read by
+ * `DataTableRow` (both forms), the pad rows, `TestRun` and the query-report table, so a
+ * loading row and a loaded one are one box by construction.
+ */
+
+/**
+ * Consistent INNER row heights. The row card wraps these in a 1px border on
+ * each side, so the outer block lands on the designed 68px / 80px total —
+ * hence the 66/78 values here.
+ */
+export const ROW_HEIGHT_DESKTOP = 'h-[66px] content-md:h-[78px]';
+export const ROW_HEIGHT_MOBILE = 'h-[66px]';
+
+/**
+ * The row shell's inset and column gap.
+ *
+ * Shared by the real row (`data-table-row`), the skeleton rows below and the
+ * pad rows in `data-table-body`, because a difference between them is a visible
+ * shift on load — and there WAS one: all three placeholders used
+ * `--spacing-system-sf` (12px) in their mobile variant while the real row uses
+ * `--spacing-system-mf` (16px) at every width, so a loading table sat 4px closer
+ * to the card edge than the loaded one and its content nudged over when data
+ * arrived. Kept as a constant rather than three copies so that cannot drift again.
+ */
+export const ROW_SHELL_CLASSES = 'items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]';
+
+/**
+ * The column every row slot stacks in, and the gap between two of them.
+ *
+ * One constant for the same reason as `ROW_SHELL_CLASSES`: the body's rows, its
+ * loading skeleton and the infinite footer's fallback skeleton all stack here,
+ * and the footer used to stack in nothing at all — its placeholder rows were
+ * bare children of the table root, touching each other.
+ */
+/** A row slot's box (its corners and its 1px border), shared by a row's card and a pad row, so both are one height. */
+const ROW_BOX_CLASS = 'overflow-hidden rounded-md border';
+/** A row's card (its frame and surface): read by `DataTableRow` and by the loading rows below, so both are one box. */
+export const DATA_TABLE_ROW_FRAME_CLASS = `${ROW_BOX_CLASS} border-ods-border bg-ods-card`;
+/** A pad row (`PlaceholderRows`): the card's box with a transparent border, so it is the row's height and invisible. */
+export const DATA_TABLE_PAD_ROW_FRAME_CLASS = `pointer-events-none relative ${ROW_BOX_CLASS} border-transparent`;
+
+/** The row's desktop shell (its cells in columns, from md) and its mobile shell (one stacked cell, below md): read by the
+ *  loading row and the pad rows, so a row's two layouts are one pair of boxes. */
+export const ROW_DESKTOP_SHELL_CLASS = 'hidden content-md:flex';
+export const ROW_MOBILE_SHELL_CLASS = 'flex justify-start content-md:hidden';
+
+export const ROW_STACK_CLASSES = 'flex w-full flex-col gap-[var(--spacing-system-xsf)]';

package/src/components/ui/data-table/data-table-row-count.tsx

@@ -18,13 +18,15 @@ export interface DataTableRowCountProps {
   pluralize?: (count: number, itemName: string) => string;
   /** Hide when the count is zero. Default `true`. */
   hideWhenEmpty?: boolean;
+  /** The rows are still being read (a table holding placeholder rows): the number is a bar, as in a loading scope. */
+  loading?: boolean;
   className?: string;
 }
 
 const ROW_COUNT_CLASS = 'whitespace-nowrap text-ods-text-secondary text-h6';
 
 /** The row count while the rows are read: the same line, the number a bar and the (plural) item name real. */
-export function DataTableRowCountSkeleton({ label, className }: { label: string; className?: string }) {
+function DataTableRowCountSkeleton({ label, className }: { label: string; className?: string }) {
   return (
     <span className={cn(ROW_COUNT_CLASS, className)} aria-hidden>
       <TextLineSkeleton type="inherit" as="span" className="inline-block w-6 align-top" /> {label}
@@ -50,11 +52,12 @@ export function DataTableRowCount({
   totalCount,
   pluralize,
   hideWhenEmpty = true,
+  loading = false,
   className,
 }: DataTableRowCountProps) {
   const table = useDataTableContext();
   // While the page is read the count is not known: the number is a bar beside the item name.
-  const inScope = useLoadingScope();
+  const inScope = useLoadingScope() || loading;
   const count = totalCount ?? table.getRowModel().rows.length;
   if (inScope) {
     return <DataTableRowCountSkeleton label={pluralize?.(2, itemName) ?? `${itemName}s`} className={className} />;

package/src/components/ui/data-table/data-table-row.tsx

@@ -6,11 +6,23 @@ import { memo, useCallback, useRef, type ReactNode } from 'react';
 import Link from '../../../embed-shims/next-link';
 import { cn } from '../../../utils/cn';
 import { isOwnClick } from '../../../utils/own-click';
-import { ROW_HEIGHT_DESKTOP, ROW_SHELL_CLASSES } from './data-table-skeleton';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
+import { loadingItemProps, useLoadingScope } from '../loading-scope';
+import { useDataTableContext } from './data-table';
+import {
+  DATA_TABLE_ROW_FRAME_CLASS,
+  ROW_DESKTOP_SHELL_CLASS,
+  ROW_HEIGHT_DESKTOP,
+  ROW_HEIGHT_MOBILE,
+  ROW_MOBILE_SHELL_CLASS,
+  ROW_SHELL_CLASSES,
+} from './data-table-row-classes';
 import { alignJustify, getHideClasses } from './utils';
 
 export interface DataTableRowProps<T> {
-  row: Row<T>;
+  /** The row. `null` is a row still being read (a body's loading rows): it draws its own skeleton, as it does in a
+   *  loading scope. */
+  row: Row<T> | null;
   onClick?: (item: T) => void;
   href?: string | null;
   /** Dense row height. */
@@ -30,6 +42,116 @@ export interface DataTableRowProps<T> {
   className?: string;
   /** Expandable content rendered below the cells, inside the same card. */
   subRow?: ReactNode;
+  /** A loading row's position in its list: every other row draws a second, secondary line under its first cell. */
+  loadingIndex?: number;
+  /** Classes on the loading row's cell shell (the skeleton's `rowClassName`). */
+  cellsClassName?: string;
+  /**
+   * A placeholder row the host put in the table while it loads (`DataTable.Body`'s `loadingCells`): in the loading
+   * scope it draws its REAL cells, each part drawing its own loading form, instead of the row's generic bars.
+   */
+  drawsCells?: boolean;
+  /** `data-*` markers (`data-loading-item`: the body marks every row it draws), on the row's root in both forms. */
+  [key: `data-${string}`]: unknown;
+}
+
+/**
+ * One row of the table, loaded and loading. ONE switch: in a loading scope, or with `row={null}` (a body's loading
+ * rows), it is its own {@link DataTableRowSkeleton}; the body never picks it.
+ */
+function DataTableRowSwitch<T>(props: DataTableRowProps<T>) {
+  const inScope = useLoadingScope();
+  if ((inScope || props.row === null) && !(props.drawsCells && props.row)) {
+    return (
+      <DataTableRowSkeleton
+        index={props.loadingIndex ?? 0}
+        compact={props.compact}
+        rowHeightClassName={props.rowHeightClassName}
+        className={typeof props.className === 'string' ? props.className : undefined}
+        cellsClassName={props.cellsClassName}
+        {...loadingItemProps(props)}
+      />
+    );
+  }
+  return <DataTableRowImpl {...props} row={props.row} />;
+}
+
+/**
+ * A row while it is read: the row's own card and shells (`data-table-row-classes`), each visible column's cell a
+ * `text-h4` bar (every other row a secondary `text-h6` line under the first cell), one stacked pair below `md`. One
+ * row of the read list (`data-loading-item`), like the loaded row.
+ */
+function DataTableRowSkeleton({
+  index,
+  compact,
+  rowHeightClassName,
+  className,
+  cellsClassName,
+  ...props
+}: {
+  index: number;
+  compact?: boolean;
+  rowHeightClassName?: string;
+  className?: string;
+  cellsClassName?: string;
+  [key: `data-${string}`]: unknown;
+}) {
+  const table = useDataTableContext();
+  const columns = table.getVisibleFlatColumns();
+  const firstColumnId = columns[0]?.id;
+  // The loaded row's height rule: a stated slot height, else a dense row's padding, else the design height.
+  const heightClass = (designHeight: string) =>
+    rowHeightClassName ? 'h-full' : compact ? 'py-[var(--spacing-system-xsf)]' : designHeight;
+  return (
+    <div
+      // Decoration: the table's own status line says it is loading.
+      aria-hidden="true"
+      {...loadingItemProps(props)}
+      className={cn(DATA_TABLE_ROW_FRAME_CLASS, rowHeightClassName, className)}
+    >
+      <div
+        className={cn(
+          ROW_DESKTOP_SHELL_CLASS,
+          !compact && 'py-0',
+          ROW_SHELL_CLASSES,
+          heightClass(ROW_HEIGHT_DESKTOP),
+          cellsClassName,
+        )}
+      >
+        {columns.map(column => {
+          const meta = column.columnDef.meta;
+          return (
+            <div
+              key={column.id}
+              className={cn(
+                'flex shrink-0 flex-col justify-center',
+                meta?.width || 'flex-1',
+                // Same responsive hiding the real header and row apply, so the columns are sized against one total.
+                getHideClasses(meta?.hideAt),
+              )}
+            >
+              <TextLineSkeleton type="h4" className="w-3/4" />
+              {index % 2 === 0 && column.id === firstColumnId && <TextLineSkeleton type="h6" className="w-1/2" />}
+            </div>
+          );
+        })}
+      </div>
+      <div
+        className={cn(
+          ROW_MOBILE_SHELL_CLASS,
+          !compact && 'py-0',
+          ROW_SHELL_CLASSES,
+          heightClass(ROW_HEIGHT_MOBILE),
+          cellsClassName,
+        )}
+      >
+        <div className="flex min-w-0 flex-1 flex-col justify-center py-[var(--spacing-system-sf)]">
+          <TextLineSkeleton type="h4" className="w-3/4" />
+          <TextLineSkeleton type="h6" className="w-1/2" />
+        </div>
+      </div>
+    </div>
+  );
 }
 
 /**
@@ -77,7 +199,10 @@ function DataTableRowImpl<T>({
   rowHeightClassName,
   className,
   subRow,
-}: DataTableRowProps<T>) {
+  drawsCells: _drawsCells,
+  ...props
+}: DataTableRowProps<T> & { row: Row<T> }) {
+  const markers = loadingItemProps(props);
   const hasSubRow = subRow != null && subRow !== false;
   // A sub-row carries its own interactive controls, so it must not live inside the
   // row-level <Link>; when present, the link wraps only the cells.
@@ -99,12 +224,10 @@ function DataTableRowImpl<T>({
   );
 
   const containerClassName = cn(
-    'overflow-hidden rounded-md border border-ods-border bg-ods-card text-inherit no-underline',
-    // A row fades in when it MOUNTS — so a loaded page eases in over the
-    // skeleton it replaces instead of snapping, and rows that were already on
-    // screen (keyed by id) do not replay it. Opacity only: nothing that moves
-    // or resizes the slot, which is the whole point of the fixed row height.
-    'duration-200 animate-in fade-in-0 motion-reduce:animate-none',
+    DATA_TABLE_ROW_FRAME_CLASS,
+    'text-inherit no-underline',
+    // No entrance fade: a loaded row replaces its loading row in place. A fade from transparent left the slot
+    // empty for a moment between the two (the loading row is gone at once), which read as loading twice.
     // A stated slot height goes HERE, on the card, with the cells flexing to
     // fill whatever the sub-row leaves. `border-box` sizing means the number a
     // caller writes is the number the row occupies, borders included.
@@ -160,6 +283,7 @@ function DataTableRowImpl<T>({
         ref={containerRef as React.RefObject<HTMLAnchorElement>}
         className={containerClassName}
         onClick={handleClick}
+        {...markers}
       >
         {cells}
       </Link>
@@ -171,6 +295,8 @@ function DataTableRowImpl<T>({
       ref={containerRef as React.RefObject<HTMLDivElement>}
       className={containerClassName}
       onClick={onClick ? handleClick : undefined}
+      // A row of a read list (the body marks it `data-loading-item`): how many there are is the record's.
+      {...markers}
     >
       {isLinkMode && href ? (
         <Link
@@ -192,7 +318,7 @@ function DataTableRowImpl<T>({
   );
 }
 
-export const DataTableRow = memo(DataTableRowImpl) as typeof DataTableRowImpl;
+export const DataTableRow = memo(DataTableRowSwitch) as typeof DataTableRowSwitch;
 
 /** Wraps primitive string/number cell values in the default text style. */
 function CellContent({ children }: { children: ReactNode }) {

package/src/components/ui/data-table/index.ts

@@ -7,8 +7,7 @@ import { DataTableEmpty } from './data-table-empty';
 import { DataTableHeader } from './data-table-header';
 import { DataTableInfiniteFooter } from './data-table-infinite-footer';
 import { DataTableRow } from './data-table-row';
-import { DataTableRowCount, DataTableRowCountSkeleton } from './data-table-row-count';
-import { DataTableSkeleton } from './data-table-skeleton';
+import { DataTableRowCount } from './data-table-row-count';
 
 /**
  * Compound table primitive. Use `useDataTable` to build the table instance,
@@ -27,7 +26,6 @@ export const DataTable = Object.assign(DataTableRoot, {
   Header: DataTableHeader,
   Body: DataTableBody,
   Row: DataTableRow,
-  Skeleton: DataTableSkeleton,
   Empty: DataTableEmpty,
   InfiniteFooter: DataTableInfiniteFooter,
   CursorFooter: DataTableCursorFooter,
@@ -40,26 +38,29 @@ export {
   DataTableHeader,
   DataTableBody,
   DataTableRow,
-  DataTableSkeleton,
   DataTableEmpty,
   DataTableInfiniteFooter,
   DataTableCursorFooter,
   DataTableRowCount,
-  DataTableRowCountSkeleton,
 };
 
 export { useDataTableContext } from './data-table';
 export { useDataTable } from './use-data-table';
-export { ROW_HEIGHT_DESKTOP, ROW_HEIGHT_MOBILE, ROW_SHELL_CLASSES } from './data-table-skeleton';
-export { alignJustify, getHideClasses, multiSelectFilterFn } from './utils';
+export {
+  DATA_TABLE_ROW_FRAME_CLASS,
+  ROW_HEIGHT_DESKTOP,
+  ROW_HEIGHT_MOBILE,
+  ROW_SHELL_CLASSES,
+  ROW_STACK_CLASSES,
+} from './data-table-row-classes';
+export { alignJustify, dataTableLoadingRows, getHideClasses, multiSelectFilterFn } from './utils';
 
-export type { DataTableFilterOption, TailwindBreakpoint } from './types';
+export type { DataTableFilterOption, DataTableFilters, TailwindBreakpoint } from './types';
 export type { DataTableProps } from './data-table';
 export { DATA_TABLE_HEADER_LABEL_CLASS } from './data-table-header';
 export type { DataTableHeaderProps, DataTableSortState } from './data-table-header';
 export type { DataTableBodyProps } from './data-table-body';
 export type { DataTableRowProps } from './data-table-row';
-export type { DataTableSkeletonProps } from './data-table-skeleton';
 export type { DataTableEmptyProps } from './data-table-empty';
 export type { DataTableInfiniteFooterProps } from './data-table-infinite-footer';
 export type { DataTableCursorFooterProps } from './data-table-cursor-footer';

package/src/components/ui/data-table/types.ts

@@ -22,6 +22,14 @@ export interface DataTableFilterOption {
   count?: number;
 }
 
+/**
+ * The options a filter UI has selected, per column: the option ids `FiltersDropdown` emits, keyed by column id. What
+ * `FilterModal` and `ListPageLayout`'s mobile filters take and hand back.
+ */
+export interface DataTableFilters {
+  [columnKey: string]: string[];
+}
+
 declare module '@tanstack/react-table' {
   interface ColumnMeta<TData extends RowData, TValue> {
     /** Tailwind width class, e.g. `'w-40'`, `'flex-1 min-w-0'`. */
@@ -70,5 +78,11 @@ declare module '@tanstack/react-table' {
      * header to fit one in.
      */
     hint?: ReactNode;
+    /**
+     * The header's text is still being read (it names whose data the table shows): the header draws an `h5` bar in
+     * its label's own box, so the header row and the column keep their size. A flag, not an empty header: `''` is a
+     * column with no label.
+     */
+    headerLoading?: boolean;
   }
 }

package/src/components/ui/data-table/utils.ts

@@ -111,6 +111,9 @@ export const multiSelectFilterFn: FilterFn<unknown> = (row, columnId, filterValu
 /** Skeleton rows of a table that knows no page size: a typical count for an UNPAGED table. */
 export const DATA_TABLE_SKELETON_ROWS = 10;
 
+/** The rows a next page's skeleton draws when neither the host nor the table states a page size. */
+export const DATA_TABLE_NEXT_PAGE_SKELETON_ROWS = 3;
+
 /**
  * The page size a host gave its table (`state.pagination.pageSize`, else `initialState.pagination.pageSize`), or
  * undefined when it gave none. Read from the OPTIONS, never `getState()`: TanStack fills in a page size of 10 for a
@@ -125,3 +128,12 @@ export function dataTablePageSize(table: {
   const size = table.options.state?.pagination?.pageSize ?? table.options.initialState?.pagination?.pageSize;
   return size && size > 0 ? size : undefined;
 }
+
+/**
+ * One page of rows still being read: the placeholders a table holds while it loads, which `DataTable.Body`'s
+ * `loadingCells` draws with the REAL cells (every part of a cell drawing its own loading form). Each row is `fill(id)`
+ * keyed `loading-<index>`: the fields a row requires, empty, so a cell reads nothing it could show.
+ */
+export function dataTableLoadingRows<T>(count: number, fill: (id: string) => T): T[] {
+  return Array.from({ length: count }, (_, index) => fill(`loading-${index}`));
+}