Skip to content

DataViews: add support for infinite scroll in table, grid, and list layouts #70955

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 25 commits into from
Aug 15, 2025
Merged

DataViews: add support for infinite scroll in table, grid, and list layouts #70955

Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
b58dce5
Try adding optional infinite scroll to dataviews
tellthemachines Jul 29, 2025
a8042d9
try infinite scroll on all view types
tellthemachines Jul 30, 2025
5ef7214
make `infiniteScrollHandler` a property of `paginationInfo`
tellthemachines Jul 30, 2025
8b6f5f4
Add some more moons to storybook fixtures
tellthemachines Aug 4, 2025
61736d3
Add infinite scroll story
tellthemachines Aug 4, 2025
c8f47ab
update tests referring to data fixture
tellthemachines Aug 4, 2025
83c5644
Add aria roles for feed pattern
tellthemachines Aug 5, 2025
6269827
add feed aria roles to list and table layouts
tellthemachines Aug 5, 2025
afc4ac7
try toggle group control
tellthemachines Aug 5, 2025
c7b4fba
Changelog entry
tellthemachines Aug 5, 2025
c86bb1c
Fix storybook example
tellthemachines Aug 7, 2025
47dec0d
Fix styling issues with story
tellthemachines Aug 7, 2025
ac60b59
Hide pagination when infinite scroll is enabled
tellthemachines Aug 7, 2025
9a7d7aa
Remove memoed const
tellthemachines Aug 11, 2025
bf8010e
Make posinset optional prop and remove semantics from list layout
tellthemachines Aug 11, 2025
55302da
add aria attribs to div wrapper in list layout
tellthemachines Aug 11, 2025
fd50cfa
update changelog
tellthemachines Aug 11, 2025
be34116
Add loading more text
tellthemachines Aug 11, 2025
fd42a2c
Disable when data by group
tellthemachines Aug 11, 2025
b1ecc53
move infiniteScroll to base view
tellthemachines Aug 13, 2025
074c8ae
Try simple toggle and hiding per page values
tellthemachines Aug 13, 2025
3d54442
Center-align "loading more results"
tellthemachines Aug 13, 2025
1a9d90a
Change loading more text to spinner
tellthemachines Aug 13, 2025
07b49dc
Remove post list handler meant for testing
tellthemachines Aug 14, 2025
0cb6ad2
Update property name and clean up
tellthemachines Aug 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Remove post list handler meant for testing
  • Loading branch information
@tellthemachines
tellthemachines committed Aug 14, 2025
commit 07b49dc61db2c23c7b70ec465846311b21bca8fe
74 changes: 4 additions & 70 deletions packages/edit-site/src/components/post-list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,11 +210,6 @@ export default function PostList( { postType } ) {
activeView = 'all',
} = location.query;
const [ selection, setSelection ] = useState( postId?.split( ',' ) ?? [] );

// Infinite scroll state
const [ allLoadedRecords, setAllLoadedRecords ] = useState( [] );
const [ isLoadingMore, setIsLoadingMore ] = useState( false );

const onChangeSelection = useCallback(
( items ) => {
setSelection( items );
Expand Down Expand Up @@ -292,67 +287,7 @@ export default function PostList( { postType } ) {
return records;
}, [ records, fields, isLoadingFields, view?.sort ] );

// Handle infinite scroll data management
const isInfiniteScroll = view.infiniteScroll;
const currentPage = view.page || 1;

// Update accumulated records when new data arrives
useEffect( () => {
if ( ! isInfiniteScroll ) {
setAllLoadedRecords( [] );
return;
}

if ( ! data ) {
return;
}

if ( currentPage === 1 ) {
// First page - replace all data
setAllLoadedRecords( data );
} else {
// Subsequent pages - append to existing data
setAllLoadedRecords( ( prev ) => {
const existingIds = new Set( prev.map( getItemId ) );
const newRecords = data.filter(
( record ) => ! existingIds.has( getItemId( record ) )
);
return [ ...prev, ...newRecords ];
} );
}
setIsLoadingMore( false );
}, [ data, currentPage, isInfiniteScroll ] );

// Create infinite scroll handler
const infiniteScrollHandler = useCallback( () => {
if (
! isInfiniteScroll ||
isLoadingMore ||
isLoadingData ||
currentPage >= totalPages
) {
return;
}

setIsLoadingMore( true );
setView( {
...view,
page: currentPage + 1,
} );
}, [
isInfiniteScroll,
isLoadingMore,
isLoadingData,
currentPage,
totalPages,
setView,
view,
] );

// Use appropriate data based on infinite scroll mode
const displayData = isInfiniteScroll ? allLoadedRecords : data;

const ids = displayData?.map( ( record ) => getItemId( record ) ) ?? [];
const ids = data?.map( ( record ) => getItemId( record ) ) ?? [];
const prevIds = usePrevious( ids ) ?? [];
const deletedIds = prevIds.filter( ( id ) => ! ids.includes( id ) );
const postIdWasDeleted = deletedIds.includes( postId );
Expand All @@ -371,9 +306,8 @@ export default function PostList( { postType } ) {
() => ( {
totalItems,
totalPages,
infiniteScrollHandler,
} ),
[ totalItems, totalPages, infiniteScrollHandler ]
[ totalItems, totalPages ]
);

const { labels, canCreateRecord } = useSelect(
Expand Down Expand Up @@ -439,8 +373,8 @@ export default function PostList( { postType } ) {
paginationInfo={ paginationInfo }
fields={ fields }
actions={ actions }
data={ displayData || EMPTY_ARRAY }
isLoading={ isLoadingData || isLoadingFields || isLoadingMore }
data={ data || EMPTY_ARRAY }
isLoading={ isLoadingData || isLoadingFields }
view={ view }
onChangeView={ setView }
selection={ selection }
Expand Down
Loading