najm-kit 2.2.4 → 2.2.5

package/dist/index.mjs

@@ -12127,7 +12127,24 @@ var computeFlags = (state) => {
   const hasControls = Boolean(state.showColumnVisibility || state.showAddButton || state.showViewToggle);
   const isRefreshing = Boolean(state.isLoading) && hasData;
   const showContent = !state.error && !hasNoData && !isFilteredEmpty && (!state.isLoading || hasData);
-  return { hasData, hasNoData, isTableView, isCardView, isJsonView, isFilesView, isCustomMode, hasActions, hasControls, isRefreshing, showContent, showPagination: state.showPagination && showContent };
+  return {
+    hasData,
+    hasNoData,
+    isTableView,
+    isCardView,
+    isJsonView,
+    isFilesView,
+    isCustomMode,
+    hasActions,
+    hasControls,
+    isRefreshing,
+    showContent,
+    // Rendered during a first load too, so the bar occupies its height while
+    // the skeleton is up. Without it the body is one bar taller than it will be
+    // once rows arrive, the measured page size is one row too many, and that
+    // row is visibly removed the moment the table loads.
+    showPagination: state.showPagination && (showContent || Boolean(state.isLoading))
+  };
 };
 var createSelectors = (_store) => {
   const store = _store;
@@ -13842,7 +13859,7 @@ function CardLoadMorePagination({
 function NTablePagination() {
   const table = useTableStore.use.table();
   const showPagination = useTableStore.use.showPagination();
-  const showContent = useTableStore.use.showContent();
+  useTableStore.use.showContent();
   const pageSizeOptions = useTableStore.use.pageSizeOptions();
   const classNames = useTableStore.use.classNames();
   const effectiveViewMode = useTableStore.use.effectiveViewMode();
@@ -13855,7 +13872,7 @@ function NTablePagination() {
   const setPagination = useTableStore.use.setPagination();
   const isPaginationControlled = useTableStore.use.isPaginationControlled();
   const bordered = useTableStore.use.bordered();
-  if (!table || !showContent || !showPagination || effectiveViewMode === "json" || effectiveViewMode === "files") return null;
+  if (!table || !showPagination || effectiveViewMode === "json" || effectiveViewMode === "files") return null;
   if (cardPagination.mode === "all") return null;
   if (effectiveViewMode === "cards" && cardPagination.mode === "infinite") return null;
   if (effectiveViewMode === "cards" && cardPagination.mode === "load-more") {
@@ -14336,7 +14353,18 @@ function TableLayout(props) {
         ] })
       }
     ),
-    /* @__PURE__ */ jsx("div", { "data-ntable-pagination": true, className: "min-w-0 shrink-0 bg-background text-foreground", children: /* @__PURE__ */ jsx(NTablePagination, {}) })
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-ntable-pagination": true,
+        "aria-hidden": isLoading && !isRefreshing ? "true" : void 0,
+        className: cn(
+          "min-w-0 shrink-0 bg-background text-foreground",
+          isLoading && !isRefreshing && "invisible"
+        ),
+        children: /* @__PURE__ */ jsx(NTablePagination, {})
+      }
+    )
   ] });
 }
 function NTable(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",