@allxsmith/bestax-bulma 5.67.8 → 5.67.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.67.8",
+  "version": "5.67.9",
   "description": "Component library based on React, Bulma, with Agent Skills and MCP",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",

package/src/scss/components/_datatable.scss

@@ -1,8 +1,9 @@
 // Bestax Extras - DataTable Styles
 // DataTable renders Bulma's own table, checkboxes and pager, which Bulma and
 // the Checkbox partial style. This adds what Bulma has no class for: the
-// toolbar above the table, the button a sortable header holds, and the
-// indicator that shows which way it sorts.
+// toolbar above the table, the button a sortable header holds, the
+// indicator that shows which way it sorts, and the height of a loading
+// row's skeleton lines.
 //
 // The sort button is styled on its own class rather than inside
 // `.data-table`, so a table built from `useDataTable`'s props, with no
@@ -119,6 +120,17 @@ $-descending: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
   }
 }
 
+// While `loading`, each cell holds one skeleton line. Bulma draws a skeleton
+// line half a line of text tall, which left a loading row shorter than the
+// row that replaces it, so the table jumped when the data came. This one is
+// a line of the cell's text tall, as Stat's loading Skeleton is a line of its
+// figure. The extra class outranks Bulma's rule whichever sheet loads first,
+// and a browser without `lh` keeps Bulma's height.
+.#{iv.$class-prefix}data-table-skeleton.#{iv.$class-prefix}skeleton-lines
+  > div {
+  height: 1lh;
+}
+
 // The sorted header says which way in `aria-sort`, so the indicator reads it
 // from there, and markup built from `useDataTable`'s props shows it too.
 th[aria-sort='ascending'] > .#{iv.$class-prefix}data-table-sort::after {