Next.js Discord

Discord Forum

react-intersection-observer

Unanswered
Siamese posted this in #help-forum
Open in Discord
Avatar
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
SiameseOP
bump
Avatar
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
SiameseOP
I got that useInView function and when inView is true I fetch more data, I put the ref onto the loading component
Idk 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
Arinji
ok so make a state variable
isAtEnd
Avatar
SiameseOP
How can that help
Avatar
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
SiameseOP
What is Offset? Is it some kind of like page save
Avatar
Arinji
and once the data is loaded, set the state to false
Avatar
SiameseOP
That won't fix my issue
Avatar
Arinji
why tho
ignore it, its needed by my db to support pagination, i take the pagination and make it infinite scroll
Avatar
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
Arinji
ok just to clarify, how are you rendering the data? mapping a state?
Avatar
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
Arinji
can you record
Avatar
SiameseOP
In a few hours
Avatar
Arinji
sure, ping me
wait @Siamese test this out and tell me if this is the thing you want
http://www.vibeify.xyz/spider
Avatar
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
Arinji
like this?
Image
Avatar
SiameseOP
yeah
Avatar
Arinji
thats normal, its gonna wait till you fetch the data
Avatar
SiameseOP
On this page it loads more and keeps you like in the same location, for me it keeps me on the bottom
Avatar
Arinji
oh
OH
hm
Avatar
SiameseOP
I think it might be caused by the sidebar
But idk
Avatar
Arinji
thats unusual
probs is a sidebar thing
cause nextjs wont do stuff like that
Avatar
SiameseOP
hm aight imma look at the sidebar maybe I can figure it out
Avatar
Arinji
sure, ping me if you find something.. also share the recording once you get it so i can verify
Avatar
SiameseOP
Aight
Avatar
SiameseOP
Image
and no, i dont hold the mouse when i finish scrolling to the bottom
Avatar
SiameseOP
.
Avatar
SiameseOP
Any ideas?
Avatar
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?