Streaming SSR & Skeleton Loading States

BlockManOS uses Next.js Streaming SSR to show instant skeleton placeholders whenever a dashboard page is loading. This eliminates blank-screen flashes during navigation and gives users immediate visual feedback that a route is responding.

How It Works

Next.js automatically renders a route's loading.tsx file as a React Suspense fallback while the page component and any async data fetches are resolving. Once the page is ready, Next.js swaps the skeleton out seamlessly.

BlockManOS ships four purpose-built skeleton variants in @/components/skeleton:

Variant	Use Case
`PageSkeleton`	General detail and form pages
`TablePageSkeleton`	Pages with a primary data table or list
`FinancePageSkeleton`	OMC financial summary views
`DocumentPageSkeleton`	Document/compliance listing pages

Coverage

As of v1.0.54, every dashboard route segment has a loading.tsx file — 33 out of 33 segments covered.

Full Route → Skeleton Mapping

Route	Skeleton
`dashboard/feedback`	`PageSkeleton`
`dashboard/developments/[id]`	`TablePageSkeleton`
`dashboard/developments/[id]/units/[unitId]`	`PageSkeleton`
`dashboard/developments/new`	`PageSkeleton`
`dashboard/developments/new/wizard`	`PageSkeleton`
`dashboard/omc/[developmentId]`	`FinancePageSkeleton`
`dashboard/omc/[developmentId]/director-portal`	`PageSkeleton`
`dashboard/owners/[id]`	`PageSkeleton`

All other dashboard routes were already covered in earlier releases.

Implementation Notes

Skeletons are pure static components — they have no data fetching, side effects, or runtime overhead.
The skeleton variant for each route is chosen to visually approximate the content layout of that route, reducing perceived layout shift when the real page appears.
No new dependencies are required.

Example — OMC Route Skeleton

// src/app/dashboard/omc/[developmentId]/loading.tsx
import { FinancePageSkeleton } from "@/components/skeleton";

export default function Loading() {
  return <FinancePageSkeleton />;
}

Example — Development Detail Skeleton

// src/app/dashboard/developments/[id]/loading.tsx
import { TablePageSkeleton } from "@/components/skeleton";

export default function Loading() {
  return <TablePageSkeleton rows={8} />;
}

Middleware & Health Check Exclusion

The auth middleware matcher is configured to exclude static assets and internal endpoints from authentication checks. As of v1.0.54 the /api/health endpoint is explicitly excluded, ensuring health probes from load balancers and monitoring tools are never blocked:

// src/middleware.ts
export const config = {
  matcher: [
    '/((?!_next/static|_next/image|favicon.ico|tailwindcss-browser\\.js|api/health).*)',
    '/(api(?!/health)|trpc)(.*)',
  ],
};