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

This commit is contained in:
Eric van der Vlist 2022-11-30 11:15:53 +01:00
parent 079a36c1de
commit 3e191dbf38
4 changed files with 44 additions and 10 deletions

View File

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

View File

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

View File

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

View File

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