How can I combine Isotope sorting with infinite scrolling without loading everything up front?

Make sure the assets themselves aren’t slowing everything down. Use generated thumbnail images for the grid and load the full-resolution image only when someone opens an item. Set explicit width and height attributes, or use an aspect-ratio on each card, so the layout knows the dimensions before the images finish loading. When adding new items, wait for their images to load before triggering an Isotope layout; otherwise cards can overlap or jump around.

The main bottleneck is probably the number of elements in the DOM, not just the image downloads. Isotope still has to measure and position every item, even if the images are lazy-loaded. Have the server return paginated results based on the active filter, such as page 1 with filter X. Load the first batch, request the next batch when the user nears the bottom, and append those items to Isotope. When the filter changes, clear the grid, reset the page number, and request the first batch for the new filter. The server should do the filtering; the grid can only sort the items it has already received.

Another workable approach is to keep previously loaded items in the DOM but use CSS features such as content-visibility to reduce rendering work for items that are off-screen. Still, the most important part is server-side filtering and pagination: pass the selected filter along with every subsequent page request. Also consider whether a CSS Grid layout can replace some of Isotope’s work if you only need a straightforward layout.