In my vuejs application, on my page, I want to display a list of clients and when individual client row is expanded, then expand that row to show a list of proposals for those client. There is also an expand/collapse all functionality for all clients (table level), where all the clients get expanded/collapsed. The issue here is, the entire dataset is very heavy and the initial load time required to fetch entire client plus proposals data is huge.
To avoid this performance issue, I am only loading a list of all clients first on initial load. When an individual item is clicked, the proposal item component does an axios call and fetches the proposal data for itself.
Only issue in above scenario is, since the number of clients are too huge for a user, the expand all will result into too many ajax requests from component instances and browser is sometimes not able to throttle it.
Please advise a proper solution for above use case.
