show loader only while loading (#1131)

commafeed-client/src/app/slices/entries.test.ts

@@ -78,6 +78,7 @@ describe("entries", () => {
                     sourceWebsiteUrl: "",
                     entries: [{ id: "3" } as Entry],
                     hasMore: true,
+                    loading: false,
                     scrollingToEntry: false,
                 },
             },
@@ -102,6 +103,7 @@ describe("entries", () => {
                     sourceWebsiteUrl: "",
                     entries: [{ id: "3", read: false } as Entry, { id: "4", read: false } as Entry],
                     hasMore: true,
+                    loading: false,
                     scrollingToEntry: false,
                 },
             },
@@ -128,6 +130,7 @@ describe("entries", () => {
                     sourceWebsiteUrl: "",
                     entries: [{ id: "3", read: false } as Entry, { id: "4", read: false } as Entry],
                     hasMore: true,
+                    loading: false,
                     scrollingToEntry: false,
                 },
             },

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

@@ -27,6 +27,7 @@ interface EntriesState {
     timestamp?: number
     selectedEntryId?: string
     hasMore: boolean
+    loading: boolean
     search?: string
     scrollingToEntry: boolean
 }
@@ -40,6 +41,7 @@ const initialState: EntriesState = {
     sourceWebsiteUrl: "",
     entries: [],
     hasMore: true,
+    loading: false,
     scrollingToEntry: false,
 }
 
@@ -329,6 +331,10 @@ export const entriesSlice = createSlice({
             state.sourceWebsiteUrl = ""
             state.hasMore = true
             state.selectedEntryId = undefined
+            state.loading = true
+        })
+        builder.addCase(loadMoreEntries.pending, state => {
+            state.loading = true
         })
         builder.addCase(loadEntries.fulfilled, (state, action) => {
             state.entries = action.payload.entries
@@ -336,12 +342,14 @@ export const entriesSlice = createSlice({
             state.sourceLabel = action.payload.name
             state.sourceWebsiteUrl = action.payload.feedLink
             state.hasMore = action.payload.hasMore
+            state.loading = false
         })
         builder.addCase(loadMoreEntries.fulfilled, (state, action) => {
             // remove already existing entries
             const entriesToAdd = action.payload.entries.filter(e => !state.entries.some(e2 => e.id === e2.id))
             state.entries = [...state.entries, ...entriesToAdd]
             state.hasMore = action.payload.hasMore
+            state.loading = false
         })
         builder.addCase(tagEntry.pending, (state, action) => {
             state.entries

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

@@ -1,4 +1,5 @@
 import { Trans } from "@lingui/macro"
+import { Box } from "@mantine/core"
 import { openModal } from "@mantine/modals"
 import { Constants } from "app/constants"
 import {
@@ -31,6 +32,7 @@ export function FeedEntries() {
     const entriesTimestamp = useAppSelector(state => state.entries.timestamp)
     const selectedEntryId = useAppSelector(state => state.entries.selectedEntryId)
     const hasMore = useAppSelector(state => state.entries.hasMore)
+    const loading = useAppSelector(state => state.entries.loading)
     const scrollMarks = useAppSelector(state => state.user.settings?.scrollMarks)
     const scrollingToEntry = useAppSelector(state => state.entries.scrollingToEntry)
     const sidebarVisible = useAppSelector(state => state.tree.sidebarVisible)
@@ -283,9 +285,9 @@ export function FeedEntries() {
         <InfiniteScroll
             id="entries"
             initialLoad={false}
-            loadMore={() => dispatch(loadMoreEntries())}
+            loadMore={() => !loading && dispatch(loadMoreEntries())}
             hasMore={hasMore}
-            loader={<Loader key={0} />}
+            loader={<Box key={0}>{loading && <Loader />}</Box>}
         >
             {entries.map(entry => (
                 <div