Efficient Technique— Loading AJAX

When you are building an app that makes a lot of AJAX calls, the initial loading can be very slow. right?

So, whats the work around that?

A better way is, write the code such that, in initial loading only a part of data is loaded, so that the UI structure becomes complete and it also doesn’t take much time in loading.

For example, say, we have a Movie Selector App, that has a search feature, which lists all the type, genre, location, production house, director, etc as search field.

Suppose, all the fields are combo-box fields, that populate data based on AJAX request, based on users keystroke, with the help of an api call.

What is the best scenario is, make call to all endpoints, with a limited no. of records, say 5, and populate with those. if having doubt, that which 5 initial records we should use, then return first 5 results from database.

5 records for each will populate the combo-box field, and rest records can be fetched on, as the user clicks the text box, that is, focus gain on field.

So, mostly, just two AJAX call for a field. It will have a improved performance and better user experience.

Of course, you might prefer other approach, of using debounce logic and call the API on each keystroke, after debounce waiting period, but again, if using react, it wont make sense to fetch records each time, when we have functionality to store data in hooks like, useState().

Key Take Away: while populating a combo-box like field using AJAX, based on user input, always make just 2 Ajax call. first one while initial loading of whole page with a limit of say, 5 records, and second, while focus gain on field, fetch all data (mostly, when data is not much, and regular ajax call is expensive.