Add animations

src/lib/islands/overlay-island.svelte

@@ -1,8 +1,10 @@
 <script>
+	import { fade } from "svelte/transition";
+
     export let variables = {title:""}
 </script>
 
-<div>
+<div in:fade={{duration: 150}} out:fade={{duration: 150}}>
     <span>{variables.title}</span>
     <slot />
 </div>

src/lib/navigation/header.svelte

@@ -1,4 +1,6 @@
 <script>
+	import { fade } from "svelte/transition";
+
     export let title = 'title'
 </script>
 
@@ -9,7 +11,7 @@
           <img src="/images/logo/wide_logo_200.png" alt="OwlBoard Logo">
         </picture>
     </a>
-    <header>{title}</header>
+    <header in:fade={{duration: 150}} out:fade={{duration: 150}}>{title}</header>
 </div>
 <div class="headerBlock">
  <!-- This exists to prevent the headerBar overlapping anything below it -->

src/lib/navigation/loading.svelte

@@ -1,4 +1,8 @@
-<div id="container">
+<script>
+    import { fade } from "svelte/transition";
+</script>
+
+<div id="container" in:fade={{delay: 150, duration: 250}} out:fade={{duration: 250}}>
     <div class="spinner"></div>
     <p>Loading...</p>
 </div>

src/routes/more/corpus/+page.svelte

@@ -1,5 +1,6 @@
 <script>
     import Header from '$lib/navigation/header.svelte'
+	import Loading from '$lib/navigation/loading.svelte';
     import Nav from '$lib/navigation/nav.svelte'
     const title = "Location Codes"   
 
@@ -12,10 +13,13 @@
         uic: ""
     }
 
+    let isLoading = false;
+
     async function getData(type = "", value = "") {
         const url = `https://owlboard.info/api/v2/ref/locationCode/${type}/${value}`
         const res = await fetch(url);
         const data = await res.json();
+        isLoading = false;
         return data;
     }
 
@@ -36,6 +40,7 @@
     }
 
     async function submit() {
+        isLoading = true;
         let data = [];
         if (val?.crs) {
             data = await getData("crs", val.crs);
@@ -66,6 +71,10 @@
  
 <Header {title} />
 
+{#if isLoading}
+  <Loading />
+{/if}
+ 
 <p>Enter one of the codes below and press submit.</p>
 <p>OwlBoard doesn't currently support searching by name or UIC.</p>
 <p class="desc">Some locations only have some applicable location codes.</p>

src/routes/more/data/+page.svelte

@@ -1,5 +1,6 @@
 <script>
     import Header from '$lib/navigation/header.svelte';
+	import Loading from '$lib/navigation/loading.svelte';
     import Nav from '$lib/navigation/nav.svelte';
     import { uuid } from '$lib/stores/uuid.js';
     import { onMount } from 'svelte';
@@ -12,6 +13,8 @@
         }
     ]
 
+    let isLoading = false;
+
     async function fetchData() {
         if ($uuid != "null") {
             const url = `https://owlboard.info/api/v2/user/${$uuid}`
@@ -24,7 +27,9 @@
     }
 
     onMount(async () => {
-        fetchData();
+        isLoading = true;
+        await fetchData();
+        isLoading = false;
     })
 </script>
  
@@ -34,11 +39,15 @@
 <p>Besides your randomly generated UUID which is used to authorise your staff access we store the following data:</p>
 <br><br>
 
-{#if data[0].domain != "User not Found"}
+{#if isLoading}
-  <p class="api_response">Registration Domain: {data[0]['domain']}</p>
+  <Loading />
-  <p class="api_response">Access Time: {data[0]['atime']}</p>
 {:else}
-  <p class="api_response">You are not registered, we don't have any data stored.</p>
+  {#if data[0].domain != "User not Found"}
+    <p class="api_response">Registration Domain: {data[0]['domain']}</p>
+    <p class="api_response">Access Time: {data[0]['atime']}</p>
+  {:else}
+    <p class="api_response">You are not registered, we don't have any data stored.</p>
+  {/if}
 {/if}
   
 <Nav />