@marktiderman/genesis-ui 2.10.0 → 2.10.1

package/dist/components/data/index.js

@@ -142,29 +142,43 @@ function DataPageShell({
       /* @__PURE__ */ jsx(Header, { ...sharedHeaderProps, options: baseHeaderOptions }),
       filters
     ] }),
-    isLoading ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-testid": "page-loader",
-        className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4",
-        children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(
+    isLoading ? (
+      // Shaped like the view it stands in for, so a list inside a panel or
+      // tab doesn't reserve a page of card placeholders.
+      /* @__PURE__ */ jsxs("div", { "data-testid": "page-loader", role: "status", "aria-busy": "true", children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading\u2026" }),
+        viewMode === "grid" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx(
           Skeleton,
           {
-            className: "h-40 rounded-xl",
+            className: "h-32 rounded-xl",
             style: { animationDelay: `${i * 75}ms` }
           },
           i
-        ))
-      }
-    ) : hasError ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [
-      /* @__PURE__ */ jsx(AlertTriangle, { className: "h-10 w-10 text-destructive mb-3" }),
-      /* @__PURE__ */ jsx("p", { className: "mb-1 text-sm font-medium text-foreground", children: "Something went wrong" }),
-      /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: errorMessage2 || `Failed to load ${entity}s. Please try again.` }),
-      onRetry && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, children: [
-        /* @__PURE__ */ jsx(RefreshCw, { className: "mr-1 h-4 w-4" }),
-        " Retry"
+        )) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            className: "h-10 rounded-md",
+            style: { animationDelay: `${i * 75}ms` }
+          },
+          i
+        )) })
       ] })
-    ] }) : isEmpty ? /* @__PURE__ */ jsx(
+    ) : hasError ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "alert",
+        className: "flex flex-col items-center justify-center py-16 text-center",
+        children: [
+          /* @__PURE__ */ jsx(AlertTriangle, { className: "h-10 w-10 text-destructive mb-3", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("p", { className: "mb-1 text-sm font-medium text-foreground", children: "Something went wrong" }),
+          /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: errorMessage2 || `Failed to load ${entity}s. Please try again.` }),
+          onRetry && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, children: [
+            /* @__PURE__ */ jsx(RefreshCw, { className: "mr-1 h-4 w-4", "aria-hidden": true }),
+            " Retry"
+          ] })
+        ]
+      }
+    ) : isEmpty ? /* @__PURE__ */ jsx(
       EmptyState,
       {
         icon: emptyIcon,