feat: load icons

src/app.css

@@ -97,7 +97,7 @@ input::placeholder {
 
   @apply hover:px-4;
 
-  @apply flex items-center justify-between gap-2 w-full truncate;
+  @apply flex items-center gap-2 w-full truncate;
 }
 
 .close-button {

src/lib/components/BrowserWindow.svelte

@@ -4,24 +4,39 @@
   import Renderer from "./DaletlRenderer/Renderer.svelte";
   import { isLoading, state } from "$lib/stores";
   import type { VigiState } from "$lib/types";
+  import GooLoadSpin from "$lib/icons/GooLoadSpin.svelte";
+  import { slide } from "svelte/transition";
 
   let loading = false;
 
   let data: Root;
+  let tabId = 0;
 
   state.subscribe((st) => {
     data = (st as VigiState).current_data;
+
+    if (!loading) {
+      tabId = (st as VigiState).current_tab_index;
+    }
   });
 
   isLoading.subscribe((val) => {
     loading = val;
+
+    if (loading) {
+      tabId = -1;
+    }
   });
 </script>
 
 <Block className="browser-window">
+  <div>
     {#if loading}
-    <div>Loading...</div>
+      <div transition:slide>
-  {:else}
+        <GooLoadSpin />
-    <Renderer {data} />
+      </div>
     {/if}
+
+    <Renderer {data} />
+  </div>
 </Block>

src/lib/components/Sidebar.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { slide } from "svelte/transition";
-
   import Block from "./Block.svelte";
   import WindowControls from "./WindowControls.svelte";
   import type { StateTab } from "$lib/types";

src/lib/components/Tab.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import type { StateTab } from "$lib/types";
   import { removeTab, selectTab } from "$lib/utils";
-  import { slide } from "svelte/transition";
+  import { fade, slide } from "svelte/transition";
   import Close from "$lib/icons/Close.svelte";
+  import { isLoading } from "$lib/stores";
+  import GooLoad from "$lib/icons/GooLoad.svelte";
 
   export let active = false;
   export let tab: StateTab;
@@ -12,6 +14,11 @@
   let tabElement: HTMLButtonElement;
 
   let hovered = false;
+  let loading = false;
+
+  isLoading.subscribe((val) => {
+    loading = val;
+  });
 </script>
 
 <div
@@ -25,8 +32,10 @@
     <button
       class="close-button"
       transition:slide={{ duration: 100, axis: "x" }}
-      on:click={() => removeTab(id)}><Close /></button
+      on:click={() => removeTab(id)}
     >
+      <Close />
+    </button>
   {/if}
 
   <button
@@ -35,9 +44,19 @@
     transition:slide={{ duration: 100 }}
     bind:this={tabElement}
     on:click={() => {
+      if (!active) {
         selectTab(id);
+      }
     }}
   >
+    <div>
+      {#if loading && active}
+        <GooLoad />
+      {/if}
+    </div>
+
+    <div>
       {tab.title}
+    </div>
   </button>
 </div>

src/lib/icons/GooLoad.svelte

@@ -0,0 +1,57 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  viewBox="0 0 24 24"
+  {...$$props}
+>
+  <defs>
+    <filter id="svgSpinnersGooeyBalls10">
+      <feGaussianBlur in="SourceGraphic" result="y" stdDeviation="1.5" />
+      <feColorMatrix
+        in="y"
+        result="z"
+        values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
+      />
+      <feBlend in="SourceGraphic" in2="z" />
+    </filter>
+  </defs>
+  <g fill="currentColor" filter="url(#svgSpinnersGooeyBalls10)">
+    <circle cx="4" cy="12" r="3">
+      <animate
+        attributeName="cx"
+        calcMode="spline"
+        dur="0.75s"
+        keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
+        repeatCount="indefinite"
+        values="4;9;4"
+      />
+      <animate
+        attributeName="r"
+        calcMode="spline"
+        dur="0.75s"
+        keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
+        repeatCount="indefinite"
+        values="3;8;3"
+      />
+    </circle>
+    <circle cx="15" cy="12" r="8">
+      <animate
+        attributeName="cx"
+        calcMode="spline"
+        dur="0.75s"
+        keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
+        repeatCount="indefinite"
+        values="15;20;15"
+      />
+      <animate
+        attributeName="r"
+        calcMode="spline"
+        dur="0.75s"
+        keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
+        repeatCount="indefinite"
+        values="8;3;8"
+      />
+    </circle>
+  </g>
+</svg>

src/lib/icons/GooLoadSpin.svelte

@@ -0,0 +1,48 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1em"
+  height="1em"
+  viewBox="0 0 24 24"
+  {...$$props}
+>
+  <defs>
+    <filter id="svgSpinnersGooeyBalls20">
+      <feGaussianBlur in="SourceGraphic" result="y" stdDeviation="1" />
+      <feColorMatrix
+        in="y"
+        result="z"
+        values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
+      />
+      <feBlend in="SourceGraphic" in2="z" />
+    </filter>
+  </defs>
+  <g filter="url(#svgSpinnersGooeyBalls20)">
+    <circle cx="5" cy="12" r="4" fill="currentColor">
+      <animate
+        attributeName="cx"
+        calcMode="spline"
+        dur="2s"
+        keySplines=".36,.62,.43,.99;.79,0,.58,.57"
+        repeatCount="indefinite"
+        values="5;8;5"
+      />
+    </circle>
+    <circle cx="19" cy="12" r="4" fill="currentColor">
+      <animate
+        attributeName="cx"
+        calcMode="spline"
+        dur="2s"
+        keySplines=".36,.62,.43,.99;.79,0,.58,.57"
+        repeatCount="indefinite"
+        values="19;16;19"
+      />
+    </circle>
+    <animateTransform
+      attributeName="transform"
+      dur="0.75s"
+      repeatCount="indefinite"
+      type="rotate"
+      values="0 12 12;360 12 12"
+    />
+  </g>
+</svg>