Lazy loading

The page renders right away. The slow parts, live download numbers from the npm registry, arrive a moment later.

What to look at

Each card starts as a skeleton with hx-trigger="load". As soon as htmx sees it, it fetches the real card and swaps it in. The page itself never waits for npm.

The fetch to the npm registry happens on the server, inside the Worker, not in your browser. Your browser only ever talks to this site. The Worker caches the answer for an hour with cf: { cacheTtl }.

The small delay: on each card is just for show, so you can see them pop in one after another.