INFINITE SCROLL

Implementation Code

// Infinite Scroll Implementation
const contentGrid = document.getElementById('content-grid');
const loading = document.getElementById('loading');
let page = 1;
let isLoading = false;
let hasMore = true;

// Intersection Observer for triggering loads
const observer = new IntersectionObserver(
    (entries) => {
        if (entries[0].isIntersecting && !isLoading && hasMore) {
            loadMoreContent();
        }
    },
    { rootMargin: '100px' }
);

// Start observing the loading indicator
observer.observe(loading);

async function loadMoreContent() {
    isLoading = true;
    loading.style.display = 'block';
    
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    // Add new content
    const newItems = generateContent(page);
    newItems.forEach(item => contentGrid.appendChild(item));
    
    // Animate new items
    requestAnimationFrame(() => {
        newItems.forEach((item, index) => {
            setTimeout(() => {
                item.classList.add('visible');
            }, index * 100);
        });
    });
    
    page++;
    isLoading = false;
    loading.style.display = 'none';
    
    // Check if we've loaded enough
    if (page > 10) {
        hasMore = false;
        document.getElementById('end-message').style.display = 'block';
        observer.disconnect();
    }
}