react-intersection-observer
Unanswered
Siamese posted this in #help-forum
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
SiameseOP
bump
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
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
ok so make a state variable
isAtEnd
SiameseOP
How can that help
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
SiameseOP
What is Offset? Is it some kind of like page save
and once the data is loaded, set the state to false
SiameseOP
That won't fix my issue
why tho
ignore it, its needed by my db to support pagination, i take the pagination and make it infinite scroll
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
ok just to clarify, how are you rendering the data? mapping a state?
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
can you record
SiameseOP
In a few hours
sure, ping me
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
SiameseOP
yeah
thats normal, its gonna wait till you fetch the data
SiameseOP
On this page it loads more and keeps you like in the same location, for me it keeps me on the bottom
SiameseOP
I think it might be caused by the sidebar
But idk
SiameseOP
hm aight imma look at the sidebar maybe I can figure it out
sure, ping me if you find something.. also share the recording once you get it so i can verify
SiameseOP
Aight
SiameseOP
and no, i dont hold the mouse when i finish scrolling to the bottom
SiameseOP
.
SiameseOP
Any ideas?
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?