Using peekCachedSignal to speedup GpxDialog

src/components/gpx-dialog/GpxDialog.tsx

@@ -2,6 +2,8 @@ import { useI18n } from '@solid-primitives/i18n';
 import { Box, Button, IconButton, SvgIcon, TextField } from '@suid/material';
 import { cloneDeep } from 'lodash';
 import { Component, createSignal, Show } from 'solid-js';
+import { newEmptyGpx } from '../../db/gpx';
+import { peekCachedSignal } from '../../workers/cached-signals';
 import dispatch from '../../workers/dispatcher-main';
 import Dialog from '../dialog';
 import GpxChooser from '../gpx-chooser';
@@ -18,19 +20,24 @@ const GpxDialog: Component<{}> = (props) => {
   const [selectedGpxId, setSelectedGpxId] = createSignal<string>('');
   const [gpx, setGpx] = createSignal<Gpx>();
 
-  console.log({ caller: 'GpxDialog', currentGpx: currentGpxId() });
+  console.log({ caller: 'GpxDialog', currentGpxId: currentGpxId() });
+
+  const fetchGpx = (gpxId: string) => {
+    if (gpxId === 'new') {
+      return newEmptyGpx();
+    }
+    const newGpx = peekCachedSignal({
+      id: gpxId,
+      action: 'getGpx',
+    });
+    return newGpx();
+  };
 
   const handleClickOpen = async () => {
     setOpen(true);
     setSelectedGpxId(currentGpxId());
     if (currentGpxId() !== '') {
-      const newGpx = await dispatch({
-        action: 'getGpx',
-        params: {
-          id: currentGpxId(),
-        },
-      });
-      setGpx(newGpx as Gpx);
+      setGpx(fetchGpx(currentGpxId()) as Gpx);
     }
     console.log({
       caller: 'GpxDialog / handleClickOpen',
@@ -38,6 +45,7 @@ const GpxDialog: Component<{}> = (props) => {
       gpx: gpx(),
     });
   };
+
   const handleClose = (event: any, reason?: string) => {
     console.log({
       caller: 'GpxDialog / handleClose',
@@ -50,15 +58,10 @@ const GpxDialog: Component<{}> = (props) => {
   };
   const gpxChangeHandler = async (gpxId: string) => {
     setSelectedGpxId(gpxId);
-    const newGpx = await dispatch({
-      action: 'getGpx',
-      params: {
-        id: gpxId,
-      },
-    });
-    setGpx(newGpx as Gpx);
+    setGpx(fetchGpx(gpxId) as Gpx);
     console.log({
       caller: 'GpxDialog / gpxChangeHandler',
+      gpxId,
       gpx: gpx(),
     });
   };