Product List 41 block design & features
A skincare product grid with a sticky toolbar that shows how many products are loaded, a filter drawer trigger and a sort menu. Cards keep the soft rounded photos, uppercase category, name and pricing, with a second image revealed on hover and an Add to cart button on larger screens.
New rows load automatically as you approach the end of the list, with skeleton cards standing in while each batch arrives and a Load more button as a keyboard friendly fallback. The toolbar count ticks up, a slim progress line under it springs to the loaded share of the catalog, and freshly loaded cards fade up in a staggered cascade as they enter view. Once you scroll past the second row, a Back to top pill slides up from the bottom edge.
The product set, total count, first page size, batch size and simulated load delay are props, so the loader can be swapped for a real fetch. Built with shadcn/ui Sheet, Select and Button plus motion/react, and reduced motion swaps the movement for simple fades and instant scrolling.
On mobile the grid drops to two columns, the toolbar condenses to a short count with icon-led controls, and the filter drawer opens full height from the side.