Request Timeout Error Block for React

Nothing leaves the page. Retry waits under a spinner for under a second and then says what that wait would have done: "Retried with a 60 s wait: finished at 42 s", or "cut again at 30 s". The outcome is fixed by the wait you chose, not by luck, and the line says the answer is typed and nothing was requested. To wire it for real, re-run the report with the chosen timeout where the code says so, and draw the waterfall from the timings you measure.

They're typed constants: STEPS for the three connection steps, RESPONSE for when the server's answer lands and AXIS for the track's width. Every bar, the cut line and both sentences derive from them, so they always agree. In your app, take them from the browser's Resource Timing entries or your server's trace, and keep the axis fixed so a longer wait is a visible move of the cut line, not a rescaling.

Because they are: 121 ms against a 120 second axis is a tenth of a percent. That is the point of the picture: the connection is fine, and the time goes on waiting for the server. Each bar keeps a three pixel minimum so it never disappears, and its duration is written beside its name.

Strictly, 408 means the server gave up waiting for the client's request, while a slow answer behind a gateway is usually a 504 (gateway timeout) or a client-side timeout. Use the status your server really returns, and set it in the response: a component can't. Call the page what it is for the visitor: the request took too long.

The select has a real label and works with the keyboard like any select; the waterfall is a labelled figure with a list, so a screen reader reads each step with its duration, and the last row says "30 s, cut" or "42 s". The verdict is a polite status line, and after Retry, focus moves to it. The cut is a heavy line and the hatched part is a pattern, never only a color.

The code moves above the heading, the select and the button stack full width, and the waterfall keeps its axis with each label above its bar, so nothing needs to scroll sideways. Retry is on the first screen.