diff --git a/commafeed-client/src/app/slices/entries.test.ts b/commafeed-client/src/app/slices/entries.test.ts index f3418b2b..e6bef016 100644 --- a/commafeed-client/src/app/slices/entries.test.ts +++ b/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, }, }, diff --git a/commafeed-client/src/app/slices/entries.ts b/commafeed-client/src/app/slices/entries.ts index b9b1d15b..dbcd8d10 100644 --- a/commafeed-client/src/app/slices/entries.ts +++ b/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 diff --git a/commafeed-client/src/components/content/FeedEntries.tsx b/commafeed-client/src/components/content/FeedEntries.tsx index ed4e580f..71c7680f 100644 --- a/commafeed-client/src/components/content/FeedEntries.tsx +++ b/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() { dispatch(loadMoreEntries())} + loadMore={() => !loading && dispatch(loadMoreEntries())} hasMore={hasMore} - loader={} + loader={{loading && }} > {entries.map(entry => (