Using Virtuoso (for scrolling) and IonCards to start improving the track browser (#16)

src/components/map/TracksBrowser.tsx

@@ -1,6 +1,9 @@
 import {
   IonButton,
   IonButtons,
+  IonCard,
+  IonCardHeader,
+  IonCardTitle,
   IonContent,
   IonIcon,
   IonItem,
@@ -11,6 +14,7 @@ import {
 } from '@ionic/react';
 import { trash } from 'ionicons/icons';
 import React, { Fragment, useRef } from 'react';
+import { Virtuoso } from 'react-virtuoso';
 import { useFind, useDB } from 'react-pouchdb';
 import { deleteGps } from '../../db/gpx';
 import { enterAnimation, leaveAnimation } from '../../lib/animation';
@@ -53,26 +57,32 @@ const TrackBrowser: React.FC<{}> = () => {
           </IonButtons>
         </IonToolbar>
         <IonContent>
-          <IonList>
-            {gpxes.map((gpx: any) => {
-              return (
-                <IonItem key={gpx._id}>
-                  <span>{gpx.gpx.metadata.time}</span>
-                  <IonButtons slot='end'>
-                    <GpxExport gpx={gpx} />
-                    <IonButton
-                      onClick={() => {
-                        deleteGps(db, { _id: gpx._id, _rev: gpx._rev });
-                      }}
-                      color='danger'
-                    >
-                      <IonIcon slot='icon-only' icon={trash} />
-                    </IonButton>
-                  </IonButtons>
-                </IonItem>
-              );
-            })}
-          </IonList>
+          <Virtuoso
+            style={{ height: '100%' }}
+            data={gpxes}
+            itemContent={(_, gpx) => (
+              <IonCard>
+                <IonCardHeader>
+                  <IonCardTitle>
+                    <IonItem>
+                      <span>{gpx.gpx.metadata.time}</span>
+                      <IonButtons slot='end'>
+                        <GpxExport gpx={gpx} />
+                        <IonButton
+                          onClick={() => {
+                            deleteGps(db, { _id: gpx._id, _rev: gpx._rev });
+                          }}
+                          color='danger'
+                        >
+                          <IonIcon slot='icon-only' icon={trash} />
+                        </IonButton>
+                      </IonButtons>
+                    </IonItem>
+                  </IonCardTitle>
+                </IonCardHeader>
+              </IonCard>
+            )}
+          ></Virtuoso>
         </IonContent>
       </IonModal>
     </Fragment>