fix(entries-pagination): keep loading pages until entries are available (#4021)

packages/netlify-cms-core/package.json

@@ -58,7 +58,7 @@
     "react-split-pane": "^0.1.85",
     "react-topbar-progress-indicator": "^2.0.0",
     "react-virtualized-auto-sizer": "^1.0.2",
-    "react-waypoint": "^8.1.0",
+    "react-waypoint": "^9.0.3",
     "react-window": "^1.8.5",
     "redux": "^4.0.5",
     "redux-notifications": "^4.0.1",

packages/netlify-cms-core/src/components/Collection/Entries/Entries.js

@@ -36,7 +36,8 @@ const Entries = ({
     return <Loader active>{loadingMessages}</Loader>;
   }
 
-  if (entries && entries.size > 0) {
+  const hasEntries = (entries && entries.size > 0) || cursor?.actions?.has('append_next');
+  if (hasEntries) {
     return (
       <>
         <EntryListing
@@ -45,8 +46,9 @@ const Entries = ({
           viewStyle={viewStyle}
           cursor={cursor}
           handleCursorActions={handleCursorActions}
+          page={page}
         />
-        {isFetching && page !== undefined ? (
+        {isFetching && page !== undefined && entries.size > 0 ? (
           <PaginationMessage>{t('collection.entries.loadingEntries')}</PaginationMessage>
         ) : null}
       </>

packages/netlify-cms-core/src/components/Collection/Entries/EntryListing.js

@@ -2,9 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
-import Waypoint from 'react-waypoint';
+import { Waypoint } from 'react-waypoint';
 import { Map } from 'immutable';
-import { Cursor } from 'netlify-cms-lib-util';
 import { selectFields, selectInferedField } from 'Reducers/collections';
 import EntryCard from './EntryCard';
 
@@ -24,10 +23,12 @@ export default class EntryListing extends React.Component {
     viewStyle: PropTypes.string,
     cursor: PropTypes.any.isRequired,
     handleCursorActions: PropTypes.func.isRequired,
+    page: PropTypes.number,
   };
 
   hasMore = () => {
-    return Cursor.create(this.props.cursor).actions.has('append_next');
+    const hasMore = this.props.cursor?.actions?.has('append_next');
+    return hasMore;
   };
 
   handleLoadMore = () => {
@@ -68,7 +69,7 @@ export default class EntryListing extends React.Component {
   };
 
   render() {
-    const { collections } = this.props;
+    const { collections, page } = this.props;
 
     return (
       <div>
@@ -76,7 +77,7 @@ export default class EntryListing extends React.Component {
           {Map.isMap(collections)
             ? this.renderCardsForSingleCollection()
             : this.renderCardsForMultipleCollections()}
-          {this.hasMore() && <Waypoint onEnter={this.handleLoadMore} />}
+          {this.hasMore() && <Waypoint key={page} onEnter={this.handleLoadMore} />}
         </CardsGrid>
       </div>
     );