react-intersection-observer
Unanswered
Siamese posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
Hi! I made a lazy loading for logs, I noticed an issue, so when you go to the bottom of the page quick, it keeps on loading data beacuse for some reason you stay on the bottom. What could cause this?
51 Replies
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
bump
![Avatar](https://cdn.discordapp.com/avatars/890486507872342027/cba9267c0173c6acfde7fa4ba0e70f94.webp?size=256)
Arinji
oh
@Siamese do youu have a guard statement?
im assuming you set a state to true when yoru at the bottom of page, and in a useEffect you make it so when the state is true you fetch data
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
I got that useInView function and when
inView
is true I fetch more data, I put the ref
onto the loading componentIdk how to fix the issue that if you scroll to the very end of the list before new data loads, if will make a bunch of requests one by another for different pages
Like it's making it fetch all of the data
![Avatar](https://cdn.discordapp.com/avatars/890486507872342027/cba9267c0173c6acfde7fa4ba0e70f94.webp?size=256)
Arinji
ok so make a state variable
isAtEnd
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
How can that help
![Avatar](https://cdn.discordapp.com/avatars/890486507872342027/cba9267c0173c6acfde7fa4ba0e70f94.webp?size=256)
Arinji
one sec
i had a component i made for infinite scroll
thats gonna explain better :D
useEffect(() => {
if (loading) return;
if (inView) {
setLoading(true);
setOffset((prev) => prev + 1);
FetchNextSongsAction(offset + 1, playlistData).then((res) => {
if (res.length === 0) {
setAtEnd(true);
}
setTracks((prev) => [...prev, ...res]);
setLoading(false);
});
}
}, [inView, offset, playlistData, loading]);
@Siamese need an explanation?
basically how it works is, when inVIew is true, set a state to true, and at the top return if the state is set to true since that means the data is already being loaded
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
What is Offset? Is it some kind of like page save
![Avatar](https://cdn.discordapp.com/avatars/890486507872342027/cba9267c0173c6acfde7fa4ba0e70f94.webp?size=256)
Arinji
and once the data is loaded, set the state to false
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
That won't fix my issue
![Avatar](https://cdn.discordapp.com/avatars/890486507872342027/cba9267c0173c6acfde7fa4ba0e70f94.webp?size=256)
Arinji
why tho
ignore it, its needed by my db to support pagination, i take the pagination and make it infinite scroll
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
Because my issue is that it doesn't fetch data when it's already being fetched, but rather it's fetching data when you are on the bottom of the page and it keeps you on the bottom of the page instead of like making the components load on your screen
![Avatar](https://cdn.discordapp.com/avatars/890486507872342027/cba9267c0173c6acfde7fa4ba0e70f94.webp?size=256)
Arinji
ok just to clarify, how are you rendering the data? mapping a state?
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
Normally scrolling it works fine, but if u move scroll bar to the bottom, it will keep you on the bottom of the page while loading new components
yup
![Avatar](https://cdn.discordapp.com/avatars/890486507872342027/cba9267c0173c6acfde7fa4ba0e70f94.webp?size=256)
Arinji
can you record
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
In a few hours
![Avatar](https://cdn.discordapp.com/avatars/890486507872342027/cba9267c0173c6acfde7fa4ba0e70f94.webp?size=256)
Arinji
sure, ping me
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
yeah
On my page it would keep me on the bottom so I can see the footer and it would keep on loading more data
![Avatar](https://cdn.discordapp.com/avatars/890486507872342027/cba9267c0173c6acfde7fa4ba0e70f94.webp?size=256)
Arinji
like this?
![Image](https://cdn.discordapp.com/attachments/1220423152731951114/1220989553293398116/image.png?ex=6610f222&is=65fe7d22&hm=752b59a9f3fbb2add693650552bdbc51c30354845b2f9adac7415c1c7a545b1e&)
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
yeah
![Avatar](https://cdn.discordapp.com/avatars/890486507872342027/cba9267c0173c6acfde7fa4ba0e70f94.webp?size=256)
Arinji
thats normal, its gonna wait till you fetch the data
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
On this page it loads more and keeps you like in the same location, for me it keeps me on the bottom
![Avatar](https://cdn.discordapp.com/avatars/890486507872342027/cba9267c0173c6acfde7fa4ba0e70f94.webp?size=256)
Arinji
oh
OH
hm
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
I think it might be caused by the sidebar
But idk
![Avatar](https://cdn.discordapp.com/avatars/890486507872342027/cba9267c0173c6acfde7fa4ba0e70f94.webp?size=256)
Arinji
thats unusual
probs is a sidebar thing
cause nextjs wont do stuff like that
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
hm aight imma look at the sidebar maybe I can figure it out
![Avatar](https://cdn.discordapp.com/avatars/890486507872342027/cba9267c0173c6acfde7fa4ba0e70f94.webp?size=256)
Arinji
sure, ping me if you find something.. also share the recording once you get it so i can verify
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
Aight
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
and no, i dont hold the mouse when i finish scrolling to the bottom
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
.
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
Any ideas?
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
SiameseOP
Hey @Arinji can this be caused by me not like recreating that skeleton component but rather just adding more data and hiding the skeleton only when there's nothing to load?