optimization

Virtualization for the card list -> Faster loading when searching

src/pages/HomePage.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useContext } from 'react';
+import { Virtuoso } from 'react-virtuoso';
 import CardRow from '../components/CardRow/CardRow';
 import SearchBar from '../components/SearchBar/SearchBar';
 import { fetchCards } from '../services/api';
@@ -59,12 +60,16 @@ function HomePage() {
   return (
     <div style={{ display: 'flex', height: '100vh' }}>
       {/* Left panel: card list */}
-      <div style={{ flex: 2, borderRight: '1px solid #ccc', padding: '1rem', overflowY: 'auto' }}>
+      <div style={{ flex: 2, borderRight: '1px solid #ccc', padding: '1rem' }}>
         <h2>Card List</h2>
         <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
-        {filteredCards.map(card => (
-          <CardRow key={card.id} card={card} />
-        ))}
+
+        {/* ✅ Virtualized list */}
+        <Virtuoso
+          style={{ height: 'calc(100vh - 100px)' }} // Adjust for header/search bar
+          data={filteredCards}
+          itemContent={(index, card) => <CardRow key={card.id} card={card} />}
+        />
       </div>
 
       {/* Right panel: card image */}