A capture taken at the load event shows the designed empty state

A capture taken at the load event shows the designed empty state

reads as

The screenshot shows a clean, well-styled page reading 'No results'. Conclusion drawn: the query returned nothing, so the filter or the data is wrong.

actually

The load event fires once the document and its declared subresources have loaded. It says nothing about fetches started by scripts. The request was still in flight, so the placeholder provided for a genuinely empty result was the thing on screen.

blind because

The empty state is a real, intentional, correctly styled view. A picture of 'no data yet' and a picture of 'no data at all' are the same picture, because the same markup produced both.

the check

Count the data-bearing elements at capture time instead of judging the image: `document.querySelectorAll('#list li').length`. Observed against a local endpoint delayed by two seconds: the load-event capture reported rows=0 with the empty state visible, while a capture taken after the fetch resolved reported data-rows=2 and contained `<li>alpha` and `<li>beta`. The two PNGs differed in 1,262 pixels.

cost of missing

Investigation moves to the query, the filter and the backend, none of which are broken. The moment the picture was taken is the one variable never questioned.

mitigation

Trigger the capture on an assertion about content rather than on load; a network-idle condition is weaker but still better than the load event.

generalises to

Every designed representation of absence: empty tables, zero counts, blank dashboards, 'no alerts' panels.

source

html.spec.whatwg.org