Load Test Dashboard

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/devtools/devtools24.tsx instead.

Usage

The file also exports devtools24Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Devtools24, devtools24Demo } from "@/components/blocks/devtools/devtools24";

export default function Page() {
  return <Devtools24 {...devtools24Demo} />;
}

Props

Types

type LoadTestMetrics = {
  rps: string;
  successRate: string;
  p95Latency: string;
  p99Latency: string;
  errorCount: string;
};

Behavior notes

• The Start/Stop pair and progress bar are real local state ("use client"): clicking Start resets progress to 0 and begins a setInterval that adds a fixed 4% every 200ms; clicking Stop, or the bar reaching 100%, clears the interval and re-enables Start.
• This is a local animated simulation with fixed demo numbers, not a real load test. No network requests are made, nothing is measured, and the RPS/success rate/latency/error metric cards never change, before, during, or after a run.
• The metric cards are intentionally static regardless of run state to keep the block simple; treat them as illustrative example output, not a live recalculation tied to progress.
• Start is disabled while a run is in progress and Stop is disabled while idle, so the two buttons are mutually exclusive at all times.
• The interval always starts from a fixed 0% on every Start click; there is no Date.now()-based timing or random jitter anywhere in the simulation.