Function Latency

site/src/components/Latency/Latency.tsx:19–70

({
	latency,
	isLoading,
	className,
})

}

export const Latency: FC<LatencyProps> = ({
	latency,
	isLoading,
	className,
}) => {
	// Always use the no latency color for loading.
	const latencyColor = getLatencyColor(isLoading ? undefined : latency);

	if (isLoading) {
		return (
			<Tooltip>
				<TooltipTrigger asChild>
					{/**
					 * Spinning progress icon must be placed inside a fixed-size container,
					 * to ensure tooltip remains stationary when opened
					 */}
					<div
						className={cn(
							"size-4 flex flex-wrap place-content-center",
							className,
						)}
					>
						<Spinner loading className={cn("!size-icon-xs", latencyColor)} />
					</div>
				</TooltipTrigger>
				<TooltipContent side="bottom">Loading latency...</TooltipContent>
			</Tooltip>
		);
	}

	if (!latency) {
		return (
			<Tooltip>
				<TooltipTrigger asChild>
					<CircleHelpIcon
						aria-label="Latency not available"
						className={cn("!size-icon-sm", latencyColor, className)}
					/>
				</TooltipTrigger>
				<TooltipContent side="bottom">Latency not available</TooltipContent>
			</Tooltip>
		);
	}

	return (
		<div className={cn("text-sm", latencyColor, className)}>
			<span className="sr-only">Latency: </span>
			{latency.toFixed(0)}
			<Abbr title="milliseconds">ms</Abbr>
		</div>
	);
};