reactivity on adding a new Track

ref #11

src/components/Tracks.svelte

@@ -6,11 +6,28 @@
   import { getlang } from "./datatable_i18n";
   import { Grid, html } from "gridjs";
   import "gridjs/dist/theme/mermaid.css";
-  //
+  import { tracks as tracksstore } from "../store.js";
+  let trackscache = [];
   let table;
+  let datatable;
+  let datatable_inited = false;
+  let initial_load_done = false;
   tracks_promise.then((data) => {
+    tracksstore.set(data);
+    tracksstore.subscribe((val) => {
+      trackscache = val;
+      if (initial_load_done === false) {
+        initial_load_done = true;
+      }
+      setTimeout(() => {
+        renderdatatable();
+      }, 100);
+    });
+    table_visible = true;
+  });
+  function renderdatatable() {
     let tabledata = [];
-    data.forEach((track) => {
+    trackscache.forEach((track) => {
       tabledata.push([
         track.name,
         track.distance,
@@ -20,23 +37,24 @@
       `),
       ]);
     });
-    const datatable = new Grid({
-      columns: [$_("track-name"), $_("track-length-in-m"), "Action"],
-      language: getlang($json("datatable")),
-      sort: true,
-      search: { enabled: true },
-      data: tabledata,
-      pagination: {
-        enabled: true,
-        limit: 25,
-        summary: false,
-      },
-    });
-    table_visible = true;
-    setTimeout(() => {
-      datatable.render(table);
-    }, 10);
-  });
+    if (datatable_inited === false) {
+      datatable = new Grid({
+        columns: [$_("track-name"), $_("track-length-in-m"), "Action"],
+        language: getlang($json("datatable")),
+        sort: true,
+        search: { enabled: true },
+        data: tabledata,
+        pagination: {
+          enabled: true,
+          limit: 25,
+          summary: false,
+        },
+      }).render(table);
+      datatable_inited = true;
+    } else {
+      datatable.updateConfig({ data: tabledata }).forceRender();
+    }
+  }
   let table_visible = false;
 </script>
 
@@ -47,8 +65,8 @@
   <div
     class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
     role="alert">
-    <p class="font-bold">track data is being loaded...</p>
-    <p class="text-sm">This might take a moment 👀</p>
+    <p class="font-bold">{$_('track-data-is-being-loaded')}</p>
+    <p class="text-sm">{$_('this-might-take-a-moment')}</p>
   </div>
 {:then tracks}
   {#if tracks.length > 0}