also manually load more entries if needed when pressing the next entry button in the header (#1557)

commafeed-client/src/app/entries/thunks.ts

@@ -230,7 +230,7 @@ export const selectPreviousEntry = createAppAsyncThunk(
 )
 export const selectNextEntry = createAppAsyncThunk(
     "entries/entry/selectNext",
-    (
+    async (
         arg: {
             expand: boolean
             markAsRead: boolean
@@ -239,12 +239,20 @@ export const selectNextEntry = createAppAsyncThunk(
         thunkApi
     ) => {
         const state = thunkApi.getState()
-        const { entries } = state.entries
+        const { entries, hasMore, loading } = state.entries
         const nextIndex = entries.findIndex(e => e.id === state.entries.selectedEntryId) + 1
-        if (nextIndex < entries.length) {
+
+        // load more entries if needed
+        // this can happen if the last entry is too large to fit on the screen and the infinite loader doesn't trigger
+        if (nextIndex >= entries.length && hasMore && !loading) {
+            await thunkApi.dispatch(loadMoreEntries())
+        }
+
+        const entriesAfterLoading = thunkApi.getState().entries.entries
+        if (nextIndex < entriesAfterLoading.length) {
             thunkApi.dispatch(
                 selectEntry({
-                    entry: entries[nextIndex],
+                    entry: entriesAfterLoading[nextIndex],
                     expand: arg.expand,
                     markAsRead: arg.markAsRead,
                     scrollToEntry: arg.scrollToEntry,

commafeed-client/src/components/content/FeedEntries.tsx

@@ -128,36 +128,28 @@ export function FeedEntries() {
     }, [dispatch, entries, viewMode, scrollMarks, scrollingToEntry])
 
     useMousetrap("r", async () => await dispatch(reloadEntries()))
-    useMousetrap("j", async () => {
+    useMousetrap(
-        // load more entries if needed
+        "j",
-        // this can happen if the last entry is too large to fit on the screen and the infinite loader doesn't trigger
+        async () =>
-        if (hasMore && !loading && selectedEntry === entries[entries.length - 1]) {
+            await dispatch(
-            await dispatch(loadMoreEntries())
+                selectNextEntry({
-        }
+                    expand: true,
-
+                    markAsRead: true,
-        await dispatch(
+                    scrollToEntry: true,
-            selectNextEntry({
+                })
-                expand: true,
+            )
-                markAsRead: true,
+    )
-                scrollToEntry: true,
+    useMousetrap(
-            })
+        "n",
-        )
+        async () =>
-    })
+            await dispatch(
-    useMousetrap("n", async () => {
+                selectNextEntry({
-        // load more entries if needed
+                    expand: false,
-        // this can happen if the last entry is too large to fit on the screen and the infinite loader doesn't trigger
+                    markAsRead: false,
-        if (hasMore && !loading && selectedEntry === entries[entries.length - 1]) {
+                    scrollToEntry: true,
-            await dispatch(loadMoreEntries())
+                })
-        }
+            )
-
+    )
-        await dispatch(
-            selectNextEntry({
-                expand: false,
-                markAsRead: false,
-                scrollToEntry: true,
-            })
-        )
-    })
     useMousetrap(
         "k",
         async () =>