Infinite scroll in mars theme

zakirsajib · 7 April 2021 16:59

Hi guys, this is my first post here.

I am trying to implement infinite scroll in mars theme. I want to use it in list.js file.

zakirsajib/Prairie-Health-Blog/blob/master/packages/mars-theme/src/components/list/list.js

import { connect, styled, decode } from "frontity";
import Item from "./list-item";
import StickyItem from "./sticky";
import TopRead from "./topread";
import Pagination from "./pagination";
import FeaturedIcon from '../../../img/star.svg';
import EmailIcon from '../../../img/email.svg';
import AllItems from "./list-item-cat";

import InfiniteScroll from 'react-infinite-scroll-component';

const List = ({ state }) => {
  // Get the data of the current list.
  const data = state.source.get(state.router.link);


  return (
    <div>
    <Container>
          <StickyPost>

This file has been truncated. show original

But it shows 12 items and does not show further.

I used usePostTypeInfiniteScroll. I am not sure should I use useArchiveInfiniteScroll!

What I want is initially shows 6 and then another 6 and so on…

WP Rest API: https://www.prairiehealth.co/blog/wp-json/wp/v2/posts/

Any help would be highly appreciable.

zakirsajib · 9 April 2021 02:55

Live URL: https://prairie-health-blog.vercel.app/

juanma · 9 April 2021 08:54

Hi @zakirsajib,

Welcome to our Community

Have you checked these docs?

https://api.frontity.org/frontity-packages/collections-packages/hooks/infinite-scroll-hooks

There’s also a YouTube video and a demo project that you can use as a reference of how to apply Infinite Scroll in your project

Hope this helps

zakirsajib · 9 April 2021 09:38

Yes I checked and it made me confused.

It worked but if i scroll up then again the images loads and if i scroll down then again images load.

Also in list.js, i have 3 others sections where the all posts are showing up.

While scrolling i can see in the url page/1 and page/2 and so on… meaning its working but its not stable.

If you look at the source code (list.js), i hide the code usePostTypeInfiniteScroll part now. I can enable and then you can see how it behaves.

zakirsajib · 11 April 2021 08:32

Hi @juanma

Okay i implemented the code in home page https://prairie-health-blog-zakirsajib.vercel.app/ but there is an issue.

when you scroll down and scroll up, images, title keep changing/flushing… see the url , it says page/2 and page/3… it keeps changing thats fine but why flushing?

Any clue?