@stevederico/skateboard-ui 4.12.0 → 4.13.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG
 
+4.13.0
+
+  Add content skeletons
+  Skeleton in ProtectedRoute
+
+4.12.1
+
+  Republish built dist
+
 4.12.0
 
   Fix drawer dark-mode text

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/App.js

@@ -22,7 +22,7 @@ import AuthOverlay from './components/AuthOverlay.js';
  * Redirect component for auth routes when authOverlay mode is enabled.
  *
  * Dispatches SHOW_AUTH_OVERLAY on mount and redirects to the previous page
- * (from location state) or /app/home as fallback.
+ * (from location state) or /app as fallback (which routes to the app's defaultRoute).
  */
 function AuthRedirect() {
     const { dispatch } = getState();
@@ -34,7 +34,7 @@ function AuthRedirect() {
         if (!isAuthenticated()) {
             dispatch({ type: 'SHOW_AUTH_OVERLAY' });
         }
-        const returnTo = location.state?.from || '/app/home';
+        const returnTo = location.state?.from || '/app';
         navigate(returnTo, { replace: true });
     }, [dispatch, navigate, location.state]);
     return null;

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/components/views/PaymentView.js

@@ -6,7 +6,7 @@ import { getCurrentUser, getAppKey } from '../core/Utilities.js';
 import { Spinner } from '../../shadcn/ui/spinner.js';
 // Whitelist of allowed redirect paths to prevent open redirect vulnerabilities
 const ALLOWED_REDIRECT_PREFIXES = ['/app/', '/'];
-const DEFAULT_REDIRECT = '/app/home';
+const DEFAULT_REDIRECT = '/app';
 function isAllowedRedirect(path) {
     try {
         // Resolve relative to current origin; reject anything that escapes it.

package/dist/ui/drawer.js

@@ -229,7 +229,7 @@ function DrawerContent({ className, children, onPointerDown, onPointerMove, onPo
         // browser claiming it for native scroll (which would fire pointercancel).
         // top-auto/m-0/w-full/max-w-none clear the native <dialog> UA inset and
         // sizing so the drawer pins to the bottom edge at full width.
-        "fixed inset-x-0 top-auto bottom-0 z-50 m-0 flex max-h-[80vh] w-full max-w-none touch-none flex-col rounded-t-xl border-t border-border bg-background p-0 text-sm outline-none backdrop:bg-black/10 backdrop:transition-opacity backdrop:duration-250 supports-backdrop-filter:backdrop:backdrop-blur-xs", open
+        "fixed inset-x-0 top-auto bottom-0 z-50 m-0 flex max-h-[80vh] w-full max-w-none touch-none flex-col rounded-t-xl border-t border-border bg-background p-0 text-sm text-foreground outline-none backdrop:bg-black/10 backdrop:transition-opacity backdrop:duration-250 supports-backdrop-filter:backdrop:backdrop-blur-xs", open
             ? "animate-in fade-in-0 slide-in-from-bottom-52 duration-300"
             : dismissingByDrag.current
                 ? ""

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.0",
+  "version": "4.13.0",
   "type": "module",
   "exports": {
     ".": {