Infinite scroll not working

[pranav.v]

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

[pranav.v]

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

[juanma]

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.

Infinite Scroll hooks

This feature is currently in beta version. We want to test it in real projects before releasing the v1, just in case we have to modify the API. If you’re interested in this feature, it’d be great if you could install it, test it, and share your feedback in this Feature Discussion. To try it out, you have to install the affected packages using these tags: @frontity/[email protected] @frontity/[email protected] @frontity/[email protected]…

As you can read in the Feature Discussion…

@SantosGuillamot

This feature is currently in beta version. We want to test it in real projects before releasing the v1, just in case we have to modify the API. If you’re interested in this feature, it’d be great if you could install it, test it, and share your feedback in this Feature Discussion. To try it out, you have to install the affected packages using these tags:

• @frontity/[email protected]
• @frontity/[email protected].
• @frontity/[email protected]

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,

[pranav.v]

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

[juanma]

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.

[pranav.v]

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.

pranav-cw/frontity

Hope that helps.

Pranav

[juanma]

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?

[pranav.v]

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.

[juanma]

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?

[pranav.v]

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.

[luisherranz]

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

[pranav.v]

Hey @luisherranz

Infinite scroll for archive posts is working absolutely fine.

The scenario is as follows:

I am using a flexbox to show posts, and firstly the homepage shows 10 posts, the posts are in a container and there are 3 posts in a row, so the 4th row only contains 1 post. Take a look at this https://frontity.captainweb.in

Now, what I want is using the blank space, so I tried it without a container, and after that when i refresh the homepage, the infine post fetch starts working right away at the start, instead of going at the bottom.

Hope, i am not blabbering. If there’s anything that i wasn’t able to describe properly, let me know.

[luisherranz]

If you refresh the page it will start again from the URL that the user is in. For example, if he/she is in /page/3 or /some-post it will start there. That is expected.

It is when the user scrolls down, the infinite scroll triggers, he/she clicks on a post and finally goes back to the last page using the “Back” button of the browser when the scroll is preserved.

Does that make sense? Is that how it works?

[pranav.v]

@luisherranz

It is when the user scrolls down, the infinite scroll triggers, he/she clicks on a post and finally goes back to the last page using the “Back” button of the browser when the scroll is preserved.

That is how it should work.
The way you described it is ideal, but it doesn’t worked that way when I modified the component.

When I visit a page, I will scroll down until last post, after which infinite scroll should work, ideally. But the case when I modify the file, and visit the site, it will start pagination right away, instead of waiting for me to scroll to the last post.

Thanks,
Pranav.

[luisherranz]

Ohh, you mean it is not working in development with HMR. That’s interesting!

@orballo did you experience the same?

[luisherranz]

By the way, you can update to the latest version now:

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

FD: Infinite Scroll hooks

[pranav.v]

Hey @luisherranz,

Gladly, it is working now.
It was the problem with CSS of the “fetcher” div which is added in useArchiveInfiniteScroll hook.

Sorry, it was a very small issue. And I think, I wasn’t very clear in explaining what the problem was.

If you want to take a look at the website, here is the link

MotherToday

You can scroll at the bottom to see it is working.

Thank you for all the help,
Pranav.

[luisherranz]

Awesome @pranav.v, I am glad it is working now