Infinite scroll not working

Hello guys, I am trying to build a site using frontity with infinite scroll feature on the site, but I am stuck at an error.

I tried copying the code from your sandbox: https://codesandbox.io/s/frontity-archive-infinite-scroll-hook-beta-vnxxq?file=/packages/mars-theme/src/components/archive/archive-page.js

But, when I am running the server in dev mode, the page is giving the error “ReferenceError: Container is not defined”

It seems that the error is in archive-page.js file

I have @frontity/[email protected] version installed for the project

Also, when I change the < Container> to < article>, in archive-page.js file, the page runs for a brief moment before turning to a blank page

EDIT: Here’s the screenshot of console when there’s a blank page after refresh https://snipboard.io/bLaeBw.jpg

It’s working now, It was showing Container not defined, because it wasn’t defined after exporting the function. I added this code after export:

const Container = styled.section width: 800px; margin: 0; padding: 24px; list-style: none;;

const Header = styled.h3 font-weight: 300; text-transform: capitalize; color: rgba(12, 17, 43, 0.9);;

and it worked

The second problem which was blank page after refreshing was solved with installing these two dependencies:

@frontity/[email protected]
@frontity/[email protected]

Thanks :slight_smile:

2 Likes

Hi @pranav.v

Welcome to the community!

Glad you were able to solve your issue.
Just to provide some more context on this. There’s this Frontity Feature created to to facilitate the implementation of infinite scroll in Frontity projects.

As you can read in the Feature Discussion…

So, yes, you have to take some extra steps right now to implement this feature but it will much more easy once this feature is finally released,

1 Like

Hey @juanma,
First of all, thanks for the article.

Now, I got the infinite scroll working on my archives pages. Now the default view of archives in mars-theme is row-wise, I wanted to display it as a grid, so I used the flexbox.

Now, what happened is, the articles are returned with a container and if the articles are not even for the flexbox, the new articles would be appended to new block (as it is supposed to do). I am attaching the Snapshot, so you could better understand.

Here you can see the block marked 1 is the empty space if articles don’t even out the flexbox, what I want to do is start the newly fetched articles after that.

Now after some debugging, I edited the use-archive-infinite-scroll.tsx file, and instead of div, I returned the “React.Fragment”, and with it, half of the problem is solved, i.e. articles are returned in a single block.

Now what happening is that the articles only loading when I am at the top of the page (maybe where the first fetcher div is), and when I scroll to the end, the new articles are not fetching. Again when I go to the top, articles start fetching.

So it would be very helpful if someone has any insight on this.

Thanks anyways :slight_smile:

Hi @pranav.v,

Can you please provide a repo or code-sandbox with your code? This is especially helpful to find solutions of technical issues with specific code

Detailing the info suggested here when having issues will help the community to provide the best possible help as quickly and as efficiently as possible.

Hey @juanma,

Sorry for the delay in response from my end. Here it’s festive season, so was a bit busy in that.
Anyways, I have uploaded files in a github repo and sharing its link with you.

Hope that helps.

Pranav

Hi @pranav.v,

There are some errors in code of your repository that doesn’t allow to properly execute your project locally.

Error: Add the URL of your WordPress REST API in state.source.api.

Can you fix them so any member of the community (Frontity team included) can replicate your issue and help you with it?

Hello @juanma,

I’ve fixed the errors in the repo, so I think it’s good to go now.

Let me know if there are any issues.

Thank you.

Hi @pranav.v,

Your REST API server is not responding so the code in your repo cannot be properly tested.

Can you fix this so the community can replicate your issue and help you with it?

Hey @juanma,

I am very sorry for that error, actually that’s the URL where the frontity site will be. The backend is on another address. BTW, I have updated the Address with my WP URL in the repo.

Such a rookie mistake, again I’m sorry and thanks, as always.

I am not sure the infinite scroll beta is in sync with the latest Frontity package updates, so it may not be working right now if combined with the latest versions.

We are going to release the final version soon, so I would suggest waiting for that, and then, if you are still having problems we can check them out :slightly_smiling_face: