add infinite scroll to load more non-members.

[ashifkhn]

Overview:
This feature introduces an infinite scroll mechanism for efficiently loading and displaying a list of non-members on the web application. Instead of loading all non-members at once, which can be slow and resource-intensive, this feature allows users to continuously load additional non-member profiles as they scroll down the page.

Functionality:

Initial Data Load:
When the page initially loads, a predefined number of non-member profiles (e.g., the first 20 or 50) are fetched and displayed to the user.

Scroll Event Detection:
As the user scrolls down the page, the application monitors the scroll position. When the user approaches the bottom of the currently loaded list (e.g., within 100 pixels from the end), a request is triggered to load more non-member profiles.

Data Fetching:
The application sends an asynchronous request (AJAX call) to the server to retrieve the next batch of non-member profiles. This request includes information about the last loaded profile to ensure that the server returns the correct subsequent set of data.

Appending New Data:
Upon receiving the new batch of non-member profiles, the application appends this data to the existing list. This seamless addition ensures that the user experience remains smooth, without the need for page reloads.

Loading Indicator:
While the next batch of profiles is being fetched, a loading indicator (e.g., a spinner or a "Loading more..." message) is displayed at the bottom of the list. This provides visual feedback to the user that more content is on the way.

End of List Handling:
If there are no more non-member profiles to load (i.e., the end of the list is reached), the loading indicator is replaced with a message indicating that there are no more items available, or the infinite scroll mechanism can be disabled.