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/all-gpxes/AllGpxes.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';
 
@@ -27,7 +33,11 @@ export const AllGpxes: Component<Props> = ({ map }) => {
     <For each={allGpxIds()}>
       {(gpxId: string) => {
         console.log({ caller: 'AllGpxes / loop', gpxId });
-        return <Gpx map={map} gpxId={gpxId} />;
+        return (
+          <Suspense>
+            <Gpx map={map} gpxId={gpxId} />
+          </Suspense>
+        );
       }}
     </For>
   );

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>
     </>

src/components/trk/Trk.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';
 
@@ -33,7 +39,11 @@ export const Trk: Component<Props> = ({ vectorSource, trkId }) => {
     <For each={trk() ? trk().trkseg || [] : []}>
       {(trksegId: string) => {
         console.log({ caller: 'Trk / loop', trksegId });
-        return <Trkseg vectorSource={vectorSource} trksegId={trksegId} />;
+        return (
+          <Suspense>
+            <Trkseg vectorSource={vectorSource} trksegId={trksegId} />
+          </Suspense>
+        );
       }}
     </For>
   );

src/db/index.ts

@@ -21,7 +21,7 @@ declare global {
 export const initDb = async (params: any) => {
   if (globalThis.db === undefined) {
     globalThis.db = new PouchDB('dyomedea', {
-      auto_compaction: true,
+      auto_compaction: false,
       revs_limit: 10,
     });
   }
@@ -47,7 +47,7 @@ export const initDb = async (params: any) => {
     db.put(previousDbDefinition);
     // TODO: support migrations
   }
-  await await db.compact();
+  //await await db.compact();
   await db.viewCleanup();
 
   // WARNING: defs must use the canonical form and be identical to what will be returned by db.getIndexes
@@ -55,7 +55,7 @@ export const initDb = async (params: any) => {
     {
       name: 'type',
       def: {
-        fields: [{ type: 'asc' }],
+        fields: [{ type: 'desc' }, { id: 'desc' }],
       },
     },
   ];