basic dependencies + first layout

src/components/Tracks.svelte

@@ -1,11 +1,18 @@
 <script>
-  import { OpenAPI, TrackService } from "@odit/lfk-client";
+  import { OpenAPI, TrackService } from "@odit/lfk-client-js";
   OpenAPI.BASE = "http://localhost:4010";
   let tracks_promise = TrackService.trackControllerGetAll();
 </script>
 
 <h1>Tracks</h1>
-{#await tracks_promise then tracks}
+{#await tracks_promise}
+  <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>
+  </div>
+{:then tracks}
   <h4>{tracks.length}</h4>
   <hr />
   {#if tracks.length % 2 == 0}
@@ -18,5 +25,10 @@
     {#each tracks as item}<span>{item.distance}</span><br />{/each}
   {/if}
 {:catch error}
-  ERORRRRR
+  <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">
+      <b class="capitalize">😢 Error</b>
+      {error}
+    </span>
+  </div>
 {/await}