Add animations

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);
@@ -65,6 +70,10 @@
 </script>
  
 <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>

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,13 +39,17 @@
 <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"}
-  <p class="api_response">Registration Domain: {data[0]['domain']}</p>
-  <p class="api_response">Access Time: {data[0]['atime']}</p>
+{#if isLoading}
+  <Loading />
 {: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 />
 
 <style>