The ProblemAs you can see from the screen shot below, there’s 4,291 records that could be displayed on this popup screen. The issue with this approach was the speed, or lack there of, that the screen loaded. Sometimes it would take over 10 seconds to load. This is not an acceptable solution for this screen. One of the best and most common solutions for this situation is to implement infinite scrolling on the popup screen. This simply means that when the screen first appears, there are only 100 records loaded. The user can then trigger the next 100 records to load by moving the scrollbar indicator to the bottom of the scrollbar. Behind the scenes, this triggered a REST API call which returned the next set of data. The new set of data was then appended to the existing data.
The code breaks down into client and server side.
Client Side Code
The snippet above adds a scroll event to the popup window. The event checks the position of the scrollbar indicator. When it’s at the bottom, the getNextJobList function is called.
The bulk of the getNextJobList function simply calls the REST Service and appends the returned data to the existing data. In the REST call, I used an public object to pass in the page number, sort column, softField and sort order values. Those objects are used throughout the application and defined as follows
Server Side Code
This is the method called from the client side. Basically, it queries the database and returns the next set of jobs.
The result of not loading all the records in the popup window at the same time were faster load times, a better user experience and a higher quality software solution for our client. This project was a lot of fun to work on and the solution was pretty easy to implement.