Similar example to "Ionic Infinite Scroll" from @Angular into @React

Hello,

Is there an example of code simulation to the “Ionic Infinite Scroll” from @Angular into @React, like in the link below: Infinite Scroller | ion-infinite-scroll Action Component

I will be very grateful for the help.

Thanks in advance.

Hello, thanks for the help.

I already try it, but it’s not working on my Ionic/React project.

can you check this?

Hello,

Thank you for your response, I will see this solution.
But as I know, there is no IonInfiniteScroll & IonInfiniteScrollContent official component in
@ionic/react, in the official Web Site of Ionic with React.

Thank you for the help.

I use @ionic/react version 5.0.7, and IonInfiniteScroll & IonInfiniteScrollContent and it works fine.

import {
  IonContent,
  IonInfiniteScroll,
  IonInfiniteScrollContent,
  IonLabel,
  IonPage,
  useIonViewDidEnter,
} from "@ionic/react";
import React, { useEffect, useState } from "react";
import { RootStateOrAny, useDispatch, useSelector } from "react-redux";
import { Col, Container, Row } from "reactstrap";
import { alertActions } from "../../actions/alert";
import Header from "../../components/Shared/Header";
import GeneralSkeletonText from "../../components/skeleton_text/general_restaurant";
import axios from "../../helpers/axiosInterceptor";

const Orders: React.FC = (props: any) => {
  const [orderList, setOrderList] = useState<any>([]);
  const [load, setLoad] = useState(false);


  const [disableInfiniteScroll, setDisableInfiniteScroll] =
    useState<boolean>(false);
  const [page, setPage] = useState(1);

  const dispatch = useDispatch();

  async function fetchData(temp) {
    axios
      .get("/orders?page=" + temp)
      .then(async (res: any) => {
        if (res && res.data && res.data.length > 0) {
          setOrderList([...orderList, ...res.data]);
          setDisableInfiniteScroll(res.data.length < 5);
        } else {
          setDisableInfiniteScroll(true);
        }
      })
      .catch((err) => console.error(err));
  }

  async function searchNext($event: CustomEvent<void>) {
    let temp = page + 1;
    setPage(temp);
    await fetchData(temp);

    ($event.target as HTMLIonInfiniteScrollElement).complete();
  }

  useIonViewDidEnter(() => {
    axios
      .get(`/orders`)
      .then((res) => {
        const data = res.data;

        setOrderList(data);
        setDisableInfiniteScroll(data.length < 5);
        setLoad(true);

      })
      .catch((err) => {
        dispatch(alertActions.error("There are errors, please try again!"));
        dispatch(alertActions.page_loader(false));
      });
  });

  useEffect(() => {
    if (!load) {
      axios
        .get(`/orders`)
        .then((res) => {
          const data = res.data;

          setOrderList(data);
          setDisableInfiniteScroll(data.length < 5);
          setLoad(true);

  
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }, [load]);

  return (
    <IonPage>
      <Header
        name="Orders"
        click={() => props.history.goBack()}
        back={false}
      ></Header>

      <IonContent fullscreen>
        {load ? (
          orderList.length == 0 ? (
            <Container fluid={true} className="h-100 d-flex align-items-center">
              <Col>
               ....
              </Col>
            </Container>
          ) : (
            <div>
              {orderList.map((data: any, key) => {
                return (
                  <div
                    className="h-flex pt-20"
                    key={key}
                    style={
                      key == orderList.length - 1 ? { marginBottom: 20 } : {}
                    }
                    onClick={() => props.history.push(`/order/${data.id}`)}
                  >
                    <div className="col-12">
                     ....
                    </div>
                  </div>
                );
              })}
              <IonInfiniteScroll
                threshold="100px"
                disabled={disableInfiniteScroll}
                onIonInfinite={(e: CustomEvent<void>) => searchNext(e)}
              >
                <IonInfiniteScrollContent loadingText="Loading..."></IonInfiniteScrollContent>
              </IonInfiniteScroll>
            </div>
          )
        ) : (
          [...Array(5)].map((e, i) => (
            <Container className="mt-3 p-0" key={i}>
              <GeneralSkeletonText />
            </Container>
          ))
        )}
      </IonContent>
    </IonPage>
  );
};

export default Orders;

This is my code, maybe can help.

Hello,

Thank you for your great help :pray::pray::pray:, this code I think it works with Data that come from an API, and sending 20 Data per page ?

Hello,

I tried your solution, but it’s stucks, it dosen’t worked for me.

Hello @noname181,

Thank you, after several tries, I finnally make it to work…
But the loadingText=“Loading…” & loadingSpinner=“bubbles” props on the are not showing when waiting to load new data…
And I noticed that when I load more data the CPU/RAM of my PC are in FULL USAGE
Did you know how to deal with it ?

Thanks again.

I do not have a problem like you, about CPU/RAM, maybe something wrong in your code so it makes multiple requests, I just guess. Hope this bug will be fixed :slight_smile:

Thanks any way @noname181 for your help, that’s worked anyway and that’s what I am. Looking for.