shadcn.io is not affiliated with official shadcn/ui
Network Request Waterfall Monitoring Block for Vue
A window with a typed page load of 20 requests on a 0 to 2.4 s axis, type filters, a bar per request, DOMContentLoaded and Load lines and a detail pane with timings, size and headers for the chosen request.
Installation
Overview
Read what a page loaded and when with this network panel for Vue with Ark UI, drawn as a window. It is Cascadeview, a browser network inspector, showing one typed load of 20 requests. A top bar names the page; a band under it filters by type (All, Script, Style, Image, Fetch) and keys the two lines on the chart. The table has a row per request: its name, a bar on an axis from 0 to 2.4 s (lighter while the request waits, solid while it receives) and its time, with a thin line at DOMContentLoaded and a bold one at Load. Choosing a row, with the mouse or Up and Down, fills the detail pane at the end: the time in queueing, DNS, connect, TLS, waiting and download, the size and what was transferred, and three response headers. Counts, bytes and the load time in the band are worked out from the rows. Only the table and the pane scroll, so the window keeps its height. No part of the window is a button for a primary action: it is a viewer. Guides draw the frame; the entrance is CSS only. For performance audits, load reviews and any tool that shows a page load.
FAQ
How do I load my own requests?
Edit LINES: one request per line with its id, name, type, status, host, priority, size and transfer in kilobytes, its start in milliseconds and the six step times (queueing, DNS, connect, TLS, waiting, download). The bar, the end time, the totals and the detail pane are worked out from those numbers. In your app map each entry of a HAR file or of the browser's resource timing to the same fields.
What do the two parts of a bar mean?
The lighter part runs from the moment the request starts until its body begins to arrive, so it includes queueing, DNS, connect, TLS and waiting. The solid part is the download. Both are drawn on the same 0 to 2.4 s axis for every row, so a long wait looks long in every row.
What stays local in the demo?
All of it. The requests are a typed example, nothing is captured from your browser and nothing calls a network. The filter, the chosen row and the pane are local state, and a reload puts them back. In your app capture the page load on your side and pass it in.
How do I use it with the keyboard?
The table is one tab stop on the chosen row. Up and Down move between the rows that are shown, Enter or Space chooses one, and the scroll region and the detail pane can be reached and scrolled with the keyboard. The type filter is a toggle group with arrow keys. The status line at the foot says what changed.