Chunked transfer encoding

Skeletons, without a client runtime.

This page is one HTTP response that the server keeps open. The shell and three placeholders are sent straight away; each panel's real content is appended as its query finishes. Nothing polls, nothing hydrates — the connection simply has not ended yet.

Response still openNo fetch()Resolves out of order

Transfer-Encoding: chunkedThe handler returns a body stream instead of a string, so axum writes the shell, then each panel as its data is ready, then closes the connection — the browser paints every chunk as it lands.

grid-row / grid-columnEach panel and its skeleton are pinned to the same grid cell, which is what lets the middle panel resolve first: DOM order stops deciding screen position.

<style> in the bodyThe swap is one rule, flushed just before the content it reveals. Non-conforming per the HTML spec, honoured by every browser, and the only way to retire a node you have already sent when you have no script to remove it.

measured at the headThe request log prints about 20µs for this page — the timing middleware stops when the response head goes out, and the seconds of body streaming all happen after that.

What this costs

The status code is spent

Headers go out with the first chunk, so a failure halfway through cannot become a 500. The handler has to render the error into the stream instead.

Nothing can be un-sent

Without a script there is no removing a node, only hiding it. The skeleton stays in the document forever, costing a few hundred bytes.

The container stays open

Late content has to be a child of the grid that positions it, so that grid — and every element around it — cannot close until the last panel lands. Only the footer pays for this; everything above it ships in the first chunk.

Buffers ruin it

A reverse proxy that buffers the response, or gzip with too large a window, collapses the stream back into one delivery and the effect disappears.

cache hit

84ms

p95 latency

−12ms

Served from memory, so it resolves first despite sitting second.

flushed at +350ms

warehouse query

1.42M

Requests served

+8.1%

Rolling 24h across all edges. This panel's query is the slow one.

flushed at +1100ms

third-party api

97.3%

Error budget

−0.4%

Waiting on an upstream provider, which is why it lands last.

flushed at +1800ms