MatTable Virtual Scrolling & MatSort: Preventing Concurrent Data Requests
0 reputation · 23 Nov 2022, 10:12 UTC
When a MatTable is combined with MatSort and virtual scrolling, each viewport shift triggers the data source’s connect method, which may issue a new HTTP GET. Rapid changes in page size or sort order can therefore spawn multiple concurrent requests before the previous ones complete. This can lead to visual inconsistencies, server rate‑limit errors, and an indeterminate loading state.
The Angular Material library currently offers no built‑in debounce or mergeMap strategy for the data source. Developers must decide whether to implement a custom RxJS pipeline (e.g., mergeMap(..., 1) or switchMap) or rely on the default behavior, which may produce an unpredictable user experience across applications.
What is the most reliable approach for managing concurrent data loads when virtual scrolling and sorting are used together? Should Angular Material provide a default concurrency control strategy, or should this responsibility remain with the application layer? How can one evaluate the trade‑offs between request coalescing and responsiveness?