@stevederico/skateboard-ui 4.12.1 → 4.13.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+4.13.0
+
+  Add content skeletons
+  Skeleton in ProtectedRoute
+
 4.12.1
 
   Republish built dist

package/README.md

@@ -124,6 +124,30 @@ Sets up routing, auth, theming, state, and error handling.
 | `/terms`, `/privacy`, `/eula`, `/subscription` | TextView | No |
 | `*` | NotFound | No |
 
+## Loading skeletons
+
+Prefer **skeletons** for content waits (lists, page data, auth gate inside layout). Keep **spinners** for actions (submit, redirect).
+
+```javascript
+import {
+  Skeleton,
+  PageSkeleton,
+  CardListSkeleton,
+  SettingsSkeleton,
+} from '@stevederico/skateboard-ui/ui/skeleton';
+
+// Generic main-content placeholder (also used by ProtectedRoute while validating /me)
+if (loading) return <PageSkeleton />;
+
+// List/grid of avatar+text cards
+if (loading) return <CardListSkeleton count={9} />;
+
+// Settings-shaped stacked cards
+if (loading) return <SettingsSkeleton />;
+```
+
+`ProtectedRoute` renders `PageSkeleton` inside the layout main area while checking the session — sidebar and tab bar stay put.
+
 ## Authentication
 
 Hybrid cookie + localStorage auth:

package/dist/components/ProtectedRoute.d.ts

@@ -6,6 +6,9 @@
  * Bypassed for lazy auth (the default) unless constants.authOverlay is false.
  * Bypassed when constants.noLogin is true (no auth required).
  *
+ * While checking, renders PageSkeleton inside the layout main content
+ * (ProtectedRoute is already nested under Layout / SidebarInset).
+ *
  * @returns {JSX.Element} Outlet if authenticated, Navigate to /signin otherwise
  *
  * @example

package/dist/components/ProtectedRoute.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import { Navigate, Outlet } from 'react-router';
 import { isAuthenticated, apiRequest, getAppKey, getConstants, isAuthOverlayEnabled } from './core/Utilities.js';
-import { Spinner } from '../shadcn/ui/spinner.js';
+import { PageSkeleton } from '../ui/skeleton.js';
 /**
  * Route guard that validates authentication before rendering child routes.
  *
@@ -11,6 +11,9 @@ import { Spinner } from '../shadcn/ui/spinner.js';
  * Bypassed for lazy auth (the default) unless constants.authOverlay is false.
  * Bypassed when constants.noLogin is true (no auth required).
  *
+ * While checking, renders PageSkeleton inside the layout main content
+ * (ProtectedRoute is already nested under Layout / SidebarInset).
+ *
  * @returns {JSX.Element} Outlet if authenticated, Navigate to /signin otherwise
  *
  * @example
@@ -49,7 +52,7 @@ const ProtectedRoute = () => {
         });
     }, []);
     if (status === 'checking') {
-        return (_jsx("div", { className: "flex items-center justify-center min-h-screen bg-background", children: _jsx(Spinner, { className: "size-6" }) }));
+        return _jsx(PageSkeleton, {});
     }
     return status === 'valid' ? _jsx(Outlet, {}) : _jsx(Navigate, { to: "/signin", replace: true });
 };

package/dist/ui/skeleton.d.ts

@@ -1,3 +1,19 @@
 import * as React from "react";
 declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-export { Skeleton };
+/**
+ * Generic main-content loading placeholder (header bar + text + card grid).
+ * Use inside SidebarInset / route content — not as a full-app takeover.
+ */
+declare function PageSkeleton({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * List/grid of bordered cards with avatar + text lines.
+ * Match count to typical list size so layout stays stable.
+ */
+declare function CardListSkeleton({ count, className, ...props }: React.ComponentProps<"div"> & {
+    count?: number;
+}): React.JSX.Element;
+/**
+ * Settings page placeholder — header strip + stacked max-w-lg cards.
+ */
+declare function SettingsSkeleton({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Skeleton, PageSkeleton, CardListSkeleton, SettingsSkeleton };

package/dist/ui/skeleton.js

@@ -1,7 +1,27 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../shadcn/lib/utils.js";
 function Skeleton({ className, ...props }) {
     return (_jsx("div", { "data-slot": "skeleton", className: cn("animate-pulse rounded-md bg-muted", className), ...props }));
 }
-export { Skeleton };
+/**
+ * Generic main-content loading placeholder (header bar + text + card grid).
+ * Use inside SidebarInset / route content — not as a full-app takeover.
+ */
+function PageSkeleton({ className, ...props }) {
+    return (_jsxs("div", { "data-slot": "page-skeleton", className: cn("flex flex-1 flex-col gap-4 p-4 lg:p-6", className), "aria-busy": "true", "aria-live": "polite", ...props, children: [_jsx(Skeleton, { className: "h-8 w-48" }), _jsx(Skeleton, { className: "h-4 w-full max-w-xl" }), _jsx(Skeleton, { className: "h-4 w-4/5 max-w-lg" }), _jsx("div", { className: "grid grid-cols-1 gap-4 pt-4 md:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsx(Skeleton, { className: "h-32 w-full" }, i))) })] }));
+}
+/**
+ * List/grid of bordered cards with avatar + text lines.
+ * Match count to typical list size so layout stays stable.
+ */
+function CardListSkeleton({ count = 6, className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-list-skeleton", className: cn("flex flex-1 flex-col gap-4 p-4 lg:p-6", className), "aria-busy": "true", "aria-live": "polite", ...props, children: _jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: count }).map((_, i) => (_jsxs("div", { className: "flex items-start gap-3 rounded-lg border border-border p-4", children: [_jsx(Skeleton, { className: "size-12 shrink-0 rounded-full" }), _jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [_jsx(Skeleton, { className: "h-4 w-2/3" }), _jsx(Skeleton, { className: "h-3 w-1/3" }), _jsx(Skeleton, { className: "mt-1 h-3 w-full" }), _jsx(Skeleton, { className: "h-3 w-4/5" })] })] }, i))) }) }));
+}
+/**
+ * Settings page placeholder — header strip + stacked max-w-lg cards.
+ */
+function SettingsSkeleton({ className, ...props }) {
+    return (_jsxs("div", { "data-slot": "settings-skeleton", className: cn("flex-1", className), "aria-busy": "true", "aria-live": "polite", ...props, children: [_jsx("div", { className: "flex h-(--header-height) shrink-0 items-center px-4 lg:px-6", children: _jsx(Skeleton, { className: "h-6 w-24" }) }), _jsx("div", { className: "h-px bg-border" }), _jsx("div", { className: "flex flex-col items-center gap-4 p-4", children: Array.from({ length: 3 }).map((_, i) => (_jsxs("div", { className: "flex w-full max-w-lg items-center justify-between gap-4 rounded-xl border border-border p-6", children: [_jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [_jsx(Skeleton, { className: "h-5 w-28" }), _jsx(Skeleton, { className: "h-4 w-48" })] }), _jsx(Skeleton, { className: "h-8 w-20 shrink-0" })] }, i))) })] }));
+}
+export { Skeleton, PageSkeleton, CardListSkeleton, SettingsSkeleton };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "4.12.1",
+  "version": "4.13.0",
   "type": "module",
   "exports": {
     ".": {