CRZ Patterns

Infinite Scroll (Feed)

SPA assumption: "useInfiniteQuery + react-infinite-scroll-component"

  • Mountains #1

    Mountains #1

    Statically generated at build time.

  • Ocean #2

    Ocean #2

    Loaded on demand as you scroll.

  • Forest #3

    Forest #3

    No framework runtime involved.

  • Desert #4

    Desert #4

    Off-screen rows skip layout and paint.

  • City #5

    City #5

    Plain HTML, CSS, and a few lines of script.

  • River #6

    River #6

    Statically generated at build time.

  • Snow #7

    Snow #7

    Loaded on demand as you scroll.

  • Sunset #8

    Sunset #8

    No framework runtime involved.

  • Lake #9

    Lake #9

    Off-screen rows skip layout and paint.

  • Meadow #10

    Meadow #10

    Plain HTML, CSS, and a few lines of script.

Scroll the list. Upcoming rows are reserved as placeholder skeletons (cf. Android Paging's enablePlaceholders), so chunks fetched as build-time JSON fade into already-reserved space instead of shifting layout. The URL never changes: reload starts over, and without JavaScript nothing past the first chunk is reachable. That is the feed pattern's inherent trade-off, not an implementation shortcut. Each row usescontent-visibility: auto, so off-screen rows skip layout and paint.

Compare: Seamless Pagination →