Table of Contents
Note

This documentation describes the LoadDataOnScroll Vue component for native UI views for Xml templates see load-data-on-scroll.

LoadDataOnScroll

Wraps scrollable content and triggers a load callback when the user scrolls near the end of the list. Displays a spinner during loading and auto-triggers if no scrollbar exists.

Import

import { LoadDataOnScroll } from '@neos/design-system'

Props

Prop Type Default Description
hasMoreData boolean — Required. When true, the load callback will be triggered at the scroll threshold
onLoad () => Promise<void> undefined Async function called to load the next page of data
direction 'vertical' \| 'horizontal' 'vertical' Scroll direction to monitor
spinnerSize Size 'extralarge' Size of the loading spinner

Slots

Slot Description
default The scrollable content

Notes

  • Triggers onLoad when the user scrolls within 10% of the list end.
  • On mount, automatically calls onLoad if the content does not overflow (no scrollbar visible).
  • Looks for a child element with data-virtual-repeat attribute as the scroll container, otherwise uses the first child.

Usage Examples

Infinite scroll list

<LoadDataOnScroll :has-more-data="hasMore" :on-load="loadNextPage">
  <div v-for="item in items" :key="item.id">{{ item.name }}</div>
</LoadDataOnScroll>

Horizontal scroll

<LoadDataOnScroll :has-more-data="hasMore" :on-load="loadMore" direction="horizontal">
  <HorizontalLayout :wrap="false">
    <Card v-for="item in items" :key="item.id">...</Card>
  </HorizontalLayout>
</LoadDataOnScroll>

See Also