Removing Virtuoso which gave more troubles than benefits and starting to use IonCards in the tracks browser (#16).

src/components/map/TracksBrowser.tsx

@@ -2,6 +2,7 @@ import {
   IonButton,
   IonButtons,
   IonCard,
+  IonCardContent,
   IonCardHeader,
   IonCardTitle,
   IonContent,
@@ -9,12 +10,12 @@ import {
   IonItem,
   IonList,
   IonModal,
+  IonSpinner,
   IonTitle,
   IonToolbar,
 } from '@ionic/react';
 import { trash } from 'ionicons/icons';
-import React, { Fragment, useRef } from 'react';
-import { Virtuoso } from 'react-virtuoso';
+import React, { Fragment, Suspense, useRef } from 'react';
 import { useFind, useDB } from 'react-pouchdb';
 import { deleteGps } from '../../db/gpx';
 import { enterAnimation, leaveAnimation } from '../../lib/animation';
@@ -57,32 +58,32 @@ const TrackBrowser: React.FC<{}> = () => {
           </IonButtons>
         </IonToolbar>
         <IonContent>
-          <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>
+          {gpxes.map((gpx: any) => (
+            <IonCard key={gpx._id}>
+              <IonCardHeader>
+                <IonItem>
+                  <IonCardTitle>{gpx.gpx.metadata.name}</IonCardTitle>
+                  <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>
+                <IonCardContent>
+                  <IonList>
+                    <IonItem>{gpx.gpx.metadata.time}</IonItem>
+                    <IonItem>{gpx.gpx.metadata.desc}</IonItem>
+                  </IonList>
+                </IonCardContent>
+              </IonCardHeader>
+            </IonCard>
+          ))}
         </IonContent>
       </IonModal>
     </Fragment>