0

I am creating a mobile app with Ionic React. I render multiple IonCards with dynamic data coming from a local JSON file. Actually, I'm mapping through the JSON file. Everything is fine. But it takes a couple of seconds to render all the cards. I want to minimize the loading time. Please help me with how do I optimize the render time and overall performance of the application. The code is below:

//imports...
import data from "../db/data.json";

const Products: React.FC = (filterText) => {
const [searchText, setSearchText] = useState("");
const categories = vocabTopics
//filtering CATEGORIES
.filter((topic) => {return topic.title.toLowerCase().indexOf(searchText.toLowerCase()) >= 0;})
.map((topic) => {
return (
<IonCol size="12" key={topic.id}>
<IonCard mode="md" routerLink={topic.route} className="except-home-screen-card no-margin no-radius-card">
<div className="flex">
<div className="card-img">
<img src={topic.thumbnail}></img>
</div>
<div className="flex-justify-space-b-w">
<div>
<IonCardSubtitle className="except-home-screen-card-subtitle">{topic.subtitle}</IonCardSubtitle>
<IonCardTitle className="except-home-screen-card-title">{topic.title}</IonCardTitle>
</div>
<div>
<IonIcon icon={chevronForwardOutline} className="card-right-icon"/>
</div>
</div>
</div>
</IonCard>
</IonCol>
);
});

return (
<IonPage>
<IonHeader className="ion-no-border">
<IonToolbar className="top-header">
<IonButtons slot="start" className="top-header-icons color-primary">
<IonBackButton defaultHref="home" /></IonButtons>
<div className="top-title-container">
<IonTitle className="ion-text-center v-center">Products</IonTitle>
</div>
</IonToolbar>
</IonHeader>
<IonContent fullscreen className="bg-style">
<div className="center padding-y">
<h1 className="lg-text ion-no-margin equal-padding">Products Categories</h>
<p className="ion-text-center ion-no-margin subtitle">70+ CATEGORIES</p>
</div>

<IonGrid className="my-grid ion-no-padding">
<IonSearchbar spellcheck={true} autocorrect="on" className="searchbar" value={searchText} mode="ios" onIonChange={(e) => setSearchText(e.detail.value!)}></IonSearchbar>

<IonRow className="center-padding">
<div className="card-container fluid">

{categories}

</div>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);
};

export default Products;
Mehdi Saqlen
  • 129
  • 1
  • 3
  • 13

1 Answers1

0

I suppose 100 Cards are not visible at the same time in a single "view", so the only solution is the "infinite scrolling" and Display/Create them only when them should became visible. (example: https://forum.ionicframework.com/t/infinite-scrolling-of-data-from-the-api/172933)

emandt
  • 2,547
  • 2
  • 16
  • 20
  • Thanks for your answer. But Ionic does not support ion-infinite-scroll in react. Please help me implement the react-infinite-scroll-component (npm) in the IonicReact project. – Mehdi Saqlen Mar 22 '21 at 18:21
  • For tutorial/examples you can do an online search. "Ionic infinite scroll react" and you will find many examples/guides about how do it....Stackoverflow can help you to FIX a certain bug, not to give you a complete piece of knowledge about programming. – emandt Mar 22 '21 at 21:08