Speed test
Speed test that measures latency, then download and upload against a test server, and keeps the three latest results for comparison.
Installation
pnpm dlx shadcn@latest add @lumesec/ln-speedtestFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/ln-speedtest.jsonUsage
import { LnSpeedtest } from "@/components/lumesec/ln-speedtest";
export function Example() {
return (
<LnSpeedtest />
);
}Behaviour
Latency first, then download and upload against a test server. Results are kept for comparison.
API reference
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
resultReact proponResultDetail{ ping: number, down: number, up: number }Fires when a run finishes. ping is in ms; down and up are in Mb/s.
Methods
Call them on the element, for example through a React ref.
run()Runs a test and returns a promise that resolves when it finishes. Same as Run test. Calling it during a run starts a second, overlapping run.
Accessibility
- Run test is a native button, disabled while a test runs.
- The phase line (Measuring latency, Testing download, Testing upload, Done) is
aria-live="polite". - The large figure changes many times per second during a run and is not a live region.
- The traffic lane canvas is
aria-hidden. - Reduced motion: traffic pixels are not drawn and each measurement step waits 20 ms, so a run takes about 1.4 s instead of about 6 s.
Theming
The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.
This component reads --background, --border, --card, --foreground, --lumesec, --muted and --muted-foreground.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border, --ui-border-subtle, --ui-fg, --ui-fg2, --ui-mono, --ui-muted, --ui-surface and --ui-track.
Notes
- Results are simulated against a fixed Vienna test server (about 7 to 9 ms ping, 930 to 950 Mb/s down, 905 to 925 Mb/s up); nothing is measured over the network. Two earlier results are shown on load.
- The React wrapper's
refis typed as the element class, so its methods can be called once the element is connected.
Related
Was this page helpful?