Within my vuejs application, there is a page where I aim to showcase a list of clients. When a user expands an individual client row, it should reveal a list of proposals specific to that client. Additionally, there is an expand/collapse functionality for all clients, allowing users to expand or collapse all rows in the table at once. The challenge lies in the fact that the dataset containing all client and proposal information is quite large, resulting in significant load times.
To address this performance issue, I have opted to initially load only the list of clients. When a user clicks on a particular client, the component responsible for displaying proposal data makes an axios call to fetch the necessary information specifically for that client.
The main drawback to this approach is that when attempting to expand all clients, a high volume of ajax requests are triggered by the numerous component instances. This can overwhelm the browser's ability to effectively manage and throttle these requests.
I am seeking advice on how best to resolve this issue within the given use case.