nandi.uk
This repository has no description
feat: "end of feed" indicator on infinite scroll lists
author
Pouria Delfanazari
date
(Oct 15, 2025, 3:03 PM -0700)
commit
24980ded
24980deda9f3c6893b83b84d96b750121aa05dfe
parent
f0a796cc
f0a796cc8ff1fb71029c9ff89802bb9272150565
+14
-4
+14
-4
src/webapp/components/contentDisplay/infiniteScroll/InfiniteScroll.tsx
+14
-4
src/webapp/components/contentDisplay/infiniteScroll/InfiniteScroll.tsx
···
1
1
'use client';
2
2
3
3
import { ReactNode, useEffect, startTransition, useRef } from 'react';
4
-
import { Center, Button, Stack } from '@mantine/core';
4
+
import { Center, Button, Stack, Text } from '@mantine/core';
5
5
import { useIntersection } from '@mantine/hooks';
6
6
7
7
interface Props {
···
22
22
threshold: 0,
23
23
});
24
24
25
+
const { hasMore, isLoading, loadMore } = props;
26
+
25
27
useEffect(() => {
26
28
startTransition(() => {
27
-
if (entry?.isIntersecting && props.hasMore && !props.isLoading) {
28
-
props.loadMore();
29
+
if (entry?.isIntersecting && hasMore && !isLoading) {
30
+
loadMore();
29
31
}
30
32
});
31
-
}, [entry?.isIntersecting, props.hasMore, props.isLoading, props.loadMore]);
33
+
}, [entry?.isIntersecting, hasMore, isLoading, loadMore]);
32
34
33
35
return (
34
36
<Stack>
···
42
44
</Button>
43
45
)}
44
46
</Center>
47
+
48
+
{!props.hasMore && !isLoading && props.dataLength !== 0 && (
49
+
<Center>
50
+
<Text c={'gray'} fw={600}>
51
+
Nothing more to show
52
+
</Text>
53
+
</Center>
54
+
)}
45
55
</Stack>
46
56
);
47
57
}