Lifecycle

WochaLoading and WochaLoaded components for auth context lifecycle.

<WochaLoading> and <WochaLoaded> read provider loading state and render children only during the appropriate lifecycle phase. Use them to avoid layout shift while auth initialises.

Installation

pnpm add @wocha/ui @wocha/react

Or scaffold with the CLI

npx @wocha/cli init --framework nextjs

import { WochaLoading, WochaLoaded } from "@wocha/ui";

WochaLoading

Renders children only while the auth context is loading.

<WochaLoading>
  <Spinner label="Checking session…" />
</WochaLoading>

Prop	Type	Description
`children`	`ReactNode`	Content shown during loading

WochaLoaded

Renders children only after the auth context has finished loading.

<WochaLoaded>
  <AppShell />
</WochaLoaded>

Prop	Type	Description
`children`	`ReactNode`	Content shown after loading completes

Combined pattern

<WochaLoading>
  <div className="flex h-screen items-center justify-center">
    <p>Loading…</p>
  </div>
</WochaLoading>
 
<WochaLoaded>
  <Header />
  <main>{children}</main>
</WochaLoaded>

Framework notes

Framework	Behaviour
React SPA	`isLoading` is true until `WochaProvider` resolves the session
Next.js	`isLoading` reflects server session hydration in `WochaSessionProvider`

Show — conditional render by auth state
Protect — authorisation gates