vasuzex 2.3.13 → 2.3.14

package/frontend/react-ui/components/DataTable/TableState.jsx

@@ -1,23 +1,52 @@
 import React from "react";
 
+/**
+ * Skeleton pulse block – light-grey bar that animates.
+ * Width can be "full", "3/4", "1/2", "1/3" or a fixed px value.
+ */
+const SkeletonCell = ({ width = "3/4", height = "h-4" }) => {
+  const widthClass =
+    width === "full" ? "w-full" :
+    width === "3/4"  ? "w-3/4"  :
+    width === "1/2"  ? "w-1/2"  :
+    width === "1/3"  ? "w-1/3"  :
+    width === "1/4"  ? "w-1/4"  : width;
+
+  return (
+    <div
+      className={`${height} ${widthClass} rounded bg-gray-200 dark:bg-gray-700 animate-pulse`}
+    />
+  );
+};
+
+/**
+ * A single skeleton row matching the number of visible columns + optional action column.
+ * Alternates bar widths so the shimmer does not look monotonous.
+ */
+const WIDTHS = ["3/4", "1/2", "full", "1/3", "3/4", "1/2"];
+
+const SkeletonRow = ({ colSpan }) => (
+  <tr className="border-b border-gray-200 dark:border-gray-700">
+    {Array.from({ length: colSpan }).map((_, i) => (
+      <td key={i} className="px-6 py-4">
+        <SkeletonCell width={WIDTHS[i % WIDTHS.length]} />
+      </td>
+    ))}
+  </tr>
+);
+
 /**
  * TableState Component
- * Handles loading and empty states for DataTable
+ * Handles loading (skeleton rows) and empty states for DataTable
  */
-export const TableState = ({ loading, empty, colSpan, emptyText }) => {
+export const TableState = ({ loading, empty, colSpan, emptyText, skeletonRows = 6 }) => {
   if (loading) {
     return (
-      <tr>
-        <td colSpan={colSpan} className="text-center py-8">
-          <div className="flex items-center justify-center gap-2">
-            <svg className="animate-spin h-5 w-5 text-brand-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-            </svg>
-            <span>Loading data...</span>
-          </div>
-        </td>
-      </tr>
+      <>
+        {Array.from({ length: skeletonRows }).map((_, i) => (
+          <SkeletonRow key={i} colSpan={colSpan} />
+        ))}
+      </>
     );
   }
   if (empty) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vasuzex",
-  "version": "2.3.13",
+  "version": "2.3.14",
   "description": "Laravel-inspired framework for Node.js monorepos - V2 with optimized dependencies",
   "type": "module",
   "main": "./framework/index.js",