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

package-lock.json

@@ -54,6 +54,7 @@
         "react-router": "^6.3.0",
         "react-router-dom": "^6.3.0",
         "react-scripts": "^5.0.0",
+        "react-virtuoso": "^2.19.1",
         "status": "^0.0.13",
         "stream-browserify": "^3.0.0",
         "typescript": "^4.8.3",
@@ -4863,6 +4864,25 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@virtuoso.dev/react-urx": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@virtuoso.dev/react-urx/-/react-urx-0.2.13.tgz",
+      "integrity": "sha512-MY0ugBDjFb5Xt8v2HY7MKcRGqw/3gTpMlLXId2EwQvYJoC8sP7nnXjAxcBtTB50KTZhO0SbzsFimaZ7pSdApwA==",
+      "dependencies": {
+        "@virtuoso.dev/urx": "^0.2.13"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
+    "node_modules/@virtuoso.dev/urx": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@virtuoso.dev/urx/-/urx-0.2.13.tgz",
+      "integrity": "sha512-iirJNv92A1ZWxoOHHDYW/1KPoi83939o83iUBQHIim0i3tMeSKEh+bxhJdTHQ86Mr4uXx9xGUTq69cp52ZP8Xw=="
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -15905,6 +15925,22 @@
         "node": ">=12"
       }
     },
+    "node_modules/react-virtuoso": {
+      "version": "2.19.1",
+      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-2.19.1.tgz",
+      "integrity": "sha512-zF6MAwujNGy2nJWCx/Df92ay/RnV2Kj4glUZfdyadI4suAn0kAZHB1BeI7yPFVp2iSccLzFlszhakWyr+fJ4Dw==",
+      "dependencies": {
+        "@virtuoso.dev/react-urx": "^0.2.12",
+        "@virtuoso.dev/urx": "^0.2.12"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16 || >=17 || >= 18",
+        "react-dom": ">=16 || >=17 || >= 18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -23178,6 +23214,19 @@
         "eslint-visitor-keys": "^3.3.0"
       }
     },
+    "@virtuoso.dev/react-urx": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@virtuoso.dev/react-urx/-/react-urx-0.2.13.tgz",
+      "integrity": "sha512-MY0ugBDjFb5Xt8v2HY7MKcRGqw/3gTpMlLXId2EwQvYJoC8sP7nnXjAxcBtTB50KTZhO0SbzsFimaZ7pSdApwA==",
+      "requires": {
+        "@virtuoso.dev/urx": "^0.2.13"
+      }
+    },
+    "@virtuoso.dev/urx": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@virtuoso.dev/urx/-/urx-0.2.13.tgz",
+      "integrity": "sha512-iirJNv92A1ZWxoOHHDYW/1KPoi83939o83iUBQHIim0i3tMeSKEh+bxhJdTHQ86Mr4uXx9xGUTq69cp52ZP8Xw=="
+    },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -31197,6 +31246,15 @@
         }
       }
     },
+    "react-virtuoso": {
+      "version": "2.19.1",
+      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-2.19.1.tgz",
+      "integrity": "sha512-zF6MAwujNGy2nJWCx/Df92ay/RnV2Kj4glUZfdyadI4suAn0kAZHB1BeI7yPFVp2iSccLzFlszhakWyr+fJ4Dw==",
+      "requires": {
+        "@virtuoso.dev/react-urx": "^0.2.12",
+        "@virtuoso.dev/urx": "^0.2.12"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -49,6 +49,7 @@
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.0",
+    "react-virtuoso": "^2.19.1",
     "status": "^0.0.13",
     "stream-browserify": "^3.0.0",
     "typescript": "^4.8.3",

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>
+          <Virtuoso
-            {gpxes.map((gpx: any) => {
+            style={{ height: '100%' }}
-              return (
+            data={gpxes}
-                <IonItem key={gpx._id}>
+            itemContent={(_, gpx) => (
-                  <span>{gpx.gpx.metadata.time}</span>
+              <IonCard>
-                  <IonButtons slot='end'>
+                <IonCardHeader>
-                    <GpxExport gpx={gpx} />
+                  <IonCardTitle>
-                    <IonButton
+                    <IonItem>
-                      onClick={() => {
+                      <span>{gpx.gpx.metadata.time}</span>
-                        deleteGps(db, { _id: gpx._id, _rev: gpx._rev });
+                      <IonButtons slot='end'>
-                      }}
+                        <GpxExport gpx={gpx} />
-                      color='danger'
+                        <IonButton
-                    >
+                          onClick={() => {
-                      <IonIcon slot='icon-only' icon={trash} />
+                            deleteGps(db, { _id: gpx._id, _rev: gpx._rev });
-                    </IonButton>
+                          }}
-                  </IonButtons>
+                          color='danger'
-                </IonItem>
+                        >
-              );
+                          <IonIcon slot='icon-only' icon={trash} />
-            })}
+                        </IonButton>
-          </IonList>
+                      </IonButtons>
+                    </IonItem>
+                  </IonCardTitle>
+                </IonCardHeader>
+              </IonCard>
+            )}
+          ></Virtuoso>
         </IonContent>
       </IonModal>
     </Fragment>