fixed datatable-emptystate transition

ref #11

src/components/Tracks.svelte

@@ -7,36 +7,29 @@
   import { Grid, html } from "gridjs";
   import "gridjs/dist/theme/mermaid.css";
   import { tracks as tracksstore } from "../store.js";
-  let trackscache = [];
+  $: trackscache = [];
   let table;
   let datatable;
   let datatable_inited = false;
-  let initial_load_done = false;
+  tracksstore.subscribe((val) => {
+    trackscache = val;
+    setTimeout(() => {
+      if (val.length > 0) {
+        renderdatatable();
+      }
+    }, 100);
+  });
   tracks_promise.then((data) => {
     tracksstore.set(data);
-    tracksstore.subscribe((val) => {
-      trackscache = val;
-      if (initial_load_done === false) {
-        initial_load_done = true;
-      }
-      setTimeout(() => {
-        renderdatatable();
-      }, 100);
-    });
-    if (trackscache.length > 0) {
-      table_visible = true;
-    }
   });
   window.track__delete_handler = () => {
     const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
-    // const track = trackscache.find((e) => e.id == trackid);
-    // console.log(track);
-    // -----
     // TODO: modal or double click confirmation?
     TrackService.trackControllerRemove(trackid)
-      .then((resp) => {
+      .then(() => {
         const newStoreVal = trackscache.filter((obj) => obj.id !== trackid);
         tracksstore.set(newStoreVal);
+        renderdatatable();
       })
       .catch((err) => {
         console.log(err);
@@ -55,36 +48,36 @@
       `),
       ]);
     });
-    if (trackscache.length > 0) {
-      if (datatable_inited === false) {
-        datatable = new Grid({
-          columns: [
-            $_("track-name"),
-            $_("track-length-in-m"),
-            $_("minimum-lap-time-in-s"),
-            $_("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();
-      }
+
+    if (datatable_inited === false) {
+      datatable = new Grid({
+        columns: [
+          $_("track-name"),
+          $_("track-length-in-m"),
+          $_("minimum-lap-time-in-s"),
+          $_("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>
 
-{#if table_visible}
+{#if trackscache.length > 0}
   <div bind:this={table} />
+{:else}
+  <TracksEmptyState />
 {/if}
 {#await tracks_promise}
   <div
@@ -93,12 +86,6 @@
     <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}
-    <!--  -->
-  {:else}
-    <TracksEmptyState />
-  {/if}
 {:catch error}
   <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
     <span class="inline-block align-middle mr-8">