Implementing a Dynamic Loading Indicator for Data Fetching
Demonstrate integrating a dynamic loading indicator which appears as the user scrolls, signaling more data is being fetched in the context of virtual scrolling.
let isLoading = false;
Flag to keep track of loading state to avoid multiple fetch calls at the same time.
const fetchData = async () => {
if (!isLoading) {
isLoading = true;
// Simulate fetching data
setTimeout(() => {
console.log('Data fetched');
isLoading = false;
}, 1000);
}
};
Function to fetch data. It simulates a data fetching operation and logs a message once the data is fetched.
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
console.log('Approaching end of list, loading more items.');
fetchData();
}
}, { threshold: 1.0 });
IntersectionObserver setup to trigger data fetching as the user scrolls close to the end of the list.
const listEnd = document.querySelector('#list-end');
observer.observe(listEnd);
Select the list end marker and start observing it with IntersectionObserver for scrolling near the end of the list.