Adding <Suspense> wrappers to start rendering Gpxes before they have all been fetched and removed auto compaction and compact db at init time.

src/components/gpx/Gpx.tsx

@@ -1,4 +1,10 @@
-import { Component, createEffect, createResource, For } from 'solid-js';
+import {
+  Component,
+  createEffect,
+  createResource,
+  For,
+  Suspense,
+} from 'solid-js';
 
 import OlMap from 'ol/Map';
 
@@ -41,13 +47,21 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
       <For each={gpx() ? gpx().trk || [] : []}>
         {(trkId: string) => {
           console.log({ caller: 'Gpx / loop', trkId });
-          return <Trk vectorSource={vectorSource} trkId={trkId} />;
+          return (
+            <Suspense>
+              <Trk vectorSource={vectorSource} trkId={trkId} />
+            </Suspense>
+          );
         }}
       </For>
       <For each={gpx() ? gpx().wpt || [] : []}>
         {(wptId: string) => {
           console.log({ caller: 'Gpx / loop', wptId });
-          return <Wpt vectorSource={vectorSource} wptId={wptId} />;
+          return (
+            <Suspense>
+              <Wpt vectorSource={vectorSource} wptId={wptId} />
+            </Suspense>
+          );
         }}
       </For>
     </>