Skip to main content
VOIDFORGE

COMPONENT

component.tsx

Loading, empty, error, success states. Keyboard accessible.

Stark avatarStark

WHAT THIS PATTERN TEACHES

How to build components that handle all four states and are keyboard-navigable with proper ARIA attributes.

WHEN TO USE THIS

Every UI component that fetches data or has interactive elements.

AT A GLANCE

export function ProjectList({ projects }: Props) {
  if (!projects) return <Skeleton />
  if (projects.length === 0) return <Empty />
  return <ul role="list">...</ul>
}

FRAMEWORK IMPLEMENTATIONS

TypeScript (React)
"use client";

import { useState } from "react";

interface Project {
  id: string;
  name: string;
  description: string;
}

interface ProjectListProps {
  projects: Project[] | null;
  isLoading?: boolean;
  error?: string | null;
}

function Skeleton() {
  return (
    <div role="status" aria-label="Loading projects">
      {[1, 2, 3].map((i) => (
← All Patterns