"Ionic Infinite Scroll" @React - Loading "Text/Spinner" not showing

Hello Devs,

I am using this React component <IonInfiniteScrollContent /> inside <IonInfiniteScroll /> to load infinite scrollable Data, but the problem is the loadingText OR the loadingSpinner not showing when waiting for new Data to be mounted on the List.

Here is my code, and thanks in advance for helping me:

<IonContent className="ion-padding" fullscreen>
   <IonList> ......</IonList>
   <IonInfiniteScroll
       onIonInfinite={(e: CustomEvent<void>) => searchNext(e)}
       threshold='100px'
       disabled={disableInfiniteScroll}       
   >
       <IonInfiniteScrollContent                  
            loadingText='Loading more data...' 
             loadingSpinner='dots'     
        >
       </IonInfiniteScrollContent>
   </IonInfiniteScroll>
</IonContent>

Do you have a full repo I can try?

Hello @ldebeasi ,
How are You :smile:

This is my code:

import { 
  IonContent,
  IonList, 
  IonInfiniteScroll, 
  IonInfiniteScrollContent 
} from '@ionic/react';

const [dataApi, setDataApi]: any = useState([]);
const [filterOptionsToApi, setFilterOptionsToApi] = useState('');
const [orderByToApi, setOrderByToApi] = useState('');
const [load, setLoad] = useState(false);
const [disableInfiniteScroll, setDisableInfiniteScroll] = useState(false);
const [page, setPage] = useState(1);

async function fetchNextData(pageNumber: number) {
    getAPIDataByPage(pageNumber, filterOptionsToApi, orderByToApi)
      .then(async (res: any) => {
        console.log('async function fetchNextData - res: ', res);

        if (res && res.data.results && res.data.results.length > 0 && dataApi.length < res.data.count) {
          
          const resDataArr = res.data.results;
          setDataApi((prevState: any) => [ ...prevState, ...resDataArr ]);
          setDisableInfiniteScroll(false);
          console.log('async fetchNextData: ', resDataArr);
        } else {
          setDisableInfiniteScroll(true);
        }
      }).catch((err) => {
        console.error(err);
      });
  }

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

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

useIonViewDidEnter(() => {
    getAPIData(filterOptionsToApi, orderByToApi).then((res) => {

      const resDataArr = res.data.results;
      setDataApi(resDataArr);
      setDisableInfiniteScroll(false);
      setLoad(true);
      console.log('useIonViewDidEnter  - res: ', resDataArr);
    }).catch((err: any) => {
      console.log('useIonViewDidEnter - error: ', err);
    });
  });

<IonContent className="ion-padding" fullscreen>
      <IonList> ......</IonList>
      <IonInfiniteScroll
       onIonInfinite={(e: CustomEvent<void>) => searchNext(e)}
       threshold='100px'
       disabled={disableInfiniteScroll}       
       >
       <IonInfiniteScrollContent                  
            loadingText='Loading more data...' 
             loadingSpinner='dots'     
        >
       </IonInfiniteScrollContent>
   </IonInfiniteScroll>
</IonContent>

Can you reproduce this in an Ionic starter app and provide a link to the GitHub repo? Hard to say what the issue might be without being able to reproduce it myself.

Hello @ldebeasi ,

Sorry for my late reply, I am working on a private project and the github repo is made on private mode, that’s why I have send to you that part of code.

Can you reproduce the issue in an Ionic starter app with just the code required to reproduce the issue? It’s going to be hard to help if I cannot reproduce the issue on my end.

Yeah, I will try and send it to you, or I will see if there is a possibilty to share my screen with you.

Hello again @ldebeasi,
How are you ?

I found the problem, and the problem is on this line ($event.target as HTMLIonInfiniteScrollElement).complete(); so I moved the line from the function searchNext () to the above asynchronous method async function fetchNextData () after these 2 lines [ setDataApi((prevState: any) => [ ...prevState, ...resDataArr ]); & setDisableInfiniteScroll(false); ] and the loadingSpinner & loadingText shows correctly.

Because after reading again on the updated documentation you made on the ion-infinite-scroll and ion-infinite-scroll-content on React, I found my issue was in the method complete () and especially on this line [ …the loading state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request to add more items to a data list. Once the data has been received and UI updated, you then call this method to signify that the loading has completed. ] and my method is asynchronous so I fixed the bug, and now its working fine.

Thanks again @ldebeasi :smiley: :smiley: :smiley:

1 Like