@overengineered-solutions/ui

Shared UI primitives for OES sibling projects. This package currently ships:

• SkeletonBlock: presentational loading placeholder for loading.tsx and Suspense fallbacks.
• SubmitButton: form submit button with built-in pending state support via useFormStatus.

Install

pnpm add @overengineered-solutions/ui

Usage

import { SkeletonBlock } from '@overengineered-solutions/ui';

export function PageLoading() {
  return (
    <div className="space-y-3">
      <SkeletonBlock className="h-6 w-48" />
      <SkeletonBlock className="h-24 w-full" />
    </div>
  );
}

import { SubmitButton } from '@overengineered-solutions/ui';

export function ProfileForm({ action }: { action: (formData: FormData) => Promise<void> }) {
  return (
    <form action={action}>
      <input name="displayName" />
      <SubmitButton
        className="rounded bg-black px-3 py-2 text-white disabled:opacity-60"
        idleLabel="Save profile"
        pendingLabel="Saving…"
      />
    </form>
  );
}

SubmitButton must render inside a <form> when using useFormStatus. For client-managed forms, pass pending explicitly.