Infinite loading

Introduction

The Infinite Loading example shows how to create a news feed that automatically loads more content when the user scrolls to the end of the list, with staggered animations for incoming items.

It uses the stagger function within variants to create the enter animations, and the motion component for scroll-triggered loading.

Get started

Let's start by creating the basic structure and fake data for our news feed.

"use client"

import { useState } from "react"

export default function InfiniteLoading() {
    const [items, fetchMoreItems] = useFakeNews()

    return (
        <div className="container">
            <header>
                <h1 className="h1">News</h1>
                <p className="big">The latest news from the world of Motion</p>
            </header>

            <main className="news-list">
                {items.map((item, index) => (
                    <NewsItem
                        key={`${item.headline}-${index}`}
                        headline={item.headline}
                        subtitle={item.subtitle}
                    />
                ))}
            </main>

            <LoadingSpinner key={items.length} onInView={fetchMoreItems} />
        </div>
    )
}

function NewsItem({ headline, subtitle }) {
    return (
        <article className="news-item">
            <h3 className="h3">{headline}</h3>
            <p className="small">{subtitle}</p>
        </article>
    )
}

function LoadingSpinner({ onInView }) {
    return (
        <div className="loading-spinner">
            <div className="spinner" />
        </div>
    )
}

/**
 * ==============   Utils & Data   ================
 */

/**
 * ==============   Styles   ================
 */

// Copy these sections from the example Source tab