Do not load entries before default sort is set

packages/netlify-cms-core/src/actions/entries.ts

@@ -515,10 +515,12 @@ export function deleteLocalBackup(collection: Collection, slug: string) {
  * Exported Thunk Action Creators
  */
 
-export function loadEntry(collection: Collection, slug: string) {
+export function loadEntry(collection: Collection, slug: string, silent = false) {
   return async (dispatch: ThunkDispatch<State, {}, AnyAction>, getState: () => State) => {
     await waitForMediaLibraryToLoad(dispatch, getState());
-    dispatch(entryLoading(collection, slug));
+    if (!silent) {
+      dispatch(entryLoading(collection, slug));
+    }
 
     try {
       const loadedEntry = await tryLoadEntry(getState(), collection, slug);
@@ -931,6 +933,8 @@ export function persistEntry(collection: Collection) {
         if (entry.get('slug') !== newSlug) {
           await dispatch(loadEntry(collection, newSlug));
           navigateToEntry(collection.get('name'), newSlug);
+        } else {
+          await dispatch(loadEntry(collection, newSlug, true));
         }
       })
       .catch((error: Error) => {

packages/netlify-cms-core/src/components/Collection/Collection.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { translate } from 'react-polyglot';
 import { connect } from 'react-redux';
 
@@ -84,6 +84,8 @@ const CollectionView = ({
   onChangeViewStyle,
   viewStyle,
 }: ReturnType<typeof mergeProps>) => {
+  const [readyToLoad, setReadyToLoad] = useState(false);
+
   const newEntryUrl = useMemo(() => {
     let url = collection.get('create') ? getNewEntryUrl(collectionName) : '';
     if (url && filterTerm) {
@@ -102,9 +104,9 @@ const CollectionView = ({
 
   const renderEntriesCollection = useCallback(() => {
     return (
-      <EntriesCollection collection={collection} viewStyle={viewStyle} filterTerm={filterTerm} />
+      <EntriesCollection collection={collection} viewStyle={viewStyle} filterTerm={filterTerm} readyToLoad={readyToLoad} />
     );
-  }, [collection, filterTerm, viewStyle]);
+  }, [collection, filterTerm, viewStyle, readyToLoad]);
 
   const renderEntriesSearch = useCallback(() => {
     return (
@@ -117,6 +119,7 @@ const CollectionView = ({
 
   useEffect(() => {
     if (sort?.first()?.get('key')) {
+      setReadyToLoad(true);
       return;
     }
 
@@ -125,10 +128,26 @@ const CollectionView = ({
       | undefined;
 
     if (!defaultSort || !defaultSort.get('field')) {
+      setReadyToLoad(true);
       return;
     }
 
-    onSortClick(defaultSort.get('field'), defaultSort.get('direction') ?? SortDirection.Ascending);
+    let alive = true;
+    const sortEntries = async () => {
+      await onSortClick(
+        defaultSort.get('field'),
+        defaultSort.get('direction') ?? SortDirection.Ascending,
+      );
+      if (alive) {
+        setReadyToLoad(true);
+      }
+    };
+
+    sortEntries();
+
+    return () => {
+      alive = false;
+    };
   }, [collection]);
 
   return (

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

@@ -68,18 +68,19 @@ class EntriesCollection extends React.Component {
     loadEntries: PropTypes.func.isRequired,
     traverseCollectionCursor: PropTypes.func.isRequired,
     entriesLoaded: PropTypes.bool,
+    readyToLoad: PropTypes.bool,
   };
 
   componentDidMount() {
-    const { collection, entriesLoaded, loadEntries } = this.props;
+    const { collection, entriesLoaded, loadEntries, readyToLoad } = this.props;
-    if (collection && !entriesLoaded) {
+    if (collection && !entriesLoaded && readyToLoad) {
       loadEntries(collection);
     }
   }
 
   componentDidUpdate(prevProps) {
-    const { collection, entriesLoaded, loadEntries } = this.props;
+    const { collection, entriesLoaded, loadEntries, readyToLoad } = this.props;
-    if (collection !== prevProps.collection && !entriesLoaded) {
+    if (!entriesLoaded && readyToLoad && !prevProps.readyToLoad) {
       loadEntries(collection);
     }
   }