From ea725c37ab8f04df8ae3887d07751312b7a481fb Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Fri, 8 Jul 2022 15:16:30 -0700
Subject: [PATCH] Adding loader animation.

---
 src/lib/components/loading.svelte | 54 +++++++++++++++++++++++++++++++
 src/routes/index.svelte           | 37 +++++++++++++++++++++
 2 files changed, 91 insertions(+)
 create mode 100644 src/lib/components/loading.svelte

diff --git a/src/lib/components/loading.svelte b/src/lib/components/loading.svelte
new file mode 100644
index 0000000..21f9f6d
--- /dev/null
+++ b/src/lib/components/loading.svelte
@@ -0,0 +1,54 @@
+<div class="loadingio-spinner-cube-ndtzkv0srwf"><div class="ldio-t5osv9zw79">
+  <div></div><div></div><div></div><div></div>
+  </div></div>
+  <style type="text/css">
+  @keyframes ldio-t5osv9zw79 {
+    0% { transform: scale(1.1500000000000001) }
+    100% { transform: scale(1) }
+  }
+  .ldio-t5osv9zw79 div {
+    position: absolute;
+    width: 80px;
+    height: 80px;
+    top: 13.333333333333336px;
+    left: 13.333333333333336px;
+    background: #e15b64;
+    animation: ldio-t5osv9zw79 1s cubic-bezier(0,0.5,0.5,1) infinite;
+    animation-delay: -0.3s;
+  }
+  .ldio-t5osv9zw79 div:nth-child(2) {
+    top: 13.333333333333336px;
+    left: 106.66666666666666px;
+    background: #f47e60;
+    animation-delay: -0.2s;
+  }
+  .ldio-t5osv9zw79 div:nth-child(3) {
+    top: 106.66666666666666px;
+    left: 13.333333333333336px;
+    background: #abbd81;
+    animation-delay: 0s;
+  }
+  .ldio-t5osv9zw79 div:nth-child(4) {
+    top: 106.66666666666666px;
+    left: 106.66666666666666px;
+    background: #f8b26a;
+    animation-delay: -0.1s;
+  }
+  .loadingio-spinner-cube-ndtzkv0srwf {
+    width: 200px;
+    height: 200px;
+    display: inline-block;
+    overflow: hidden;
+    background: none;
+  }
+  .ldio-t5osv9zw79 {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transform: translateZ(0) scale(1);
+    backface-visibility: hidden;
+    transform-origin: 0 0; /* see note above */
+  }
+  .ldio-t5osv9zw79 div { box-sizing: content-box; }
+  /* generated by https://loading.io/ */
+  </style>
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index bceda54..963a161 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
+  import { fly, fade } from 'svelte/transition';
+  import { flip } from 'svelte/animate';
   // import { Checkbox, NumberInput } from 'carbon-components-svelte';
   import Game from '$lib/components/game.svelte';
   import type { GameType } from '$lib/types';
   import Listbox from '$lib/components/listbox.svelte';
+  import Loading from '$lib/components/loading.svelte';
+  import Portal from '$lib/Portal.svelte';
   // import { enhance } from "$lib/form";
 
   let games: GameType[] = [];
@@ -114,6 +118,19 @@
   </form>
 </div>
 
+{#if submitting}
+  <Portal>
+    <div
+      in:fade
+      out:fade
+      class="loading">
+        <Loading />
+        <h3>Loading...</h3>
+    </div>
+    <div class="background" />
+  </Portal>
+{/if}
+
 <div class="games">
   <h1>Games</h1>
   {#each games as game}
@@ -122,6 +139,26 @@
 </div>
 
 <style lang="scss">
+  .loading {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 101;
+    display: grid;
+    place-items: center;
+    gap: 1rem;
+  }
+
+  .background {
+    background: black;
+    opacity: 0.8;
+    cursor: none;
+    inset: 0;
+    position: fixed;
+    z-index: 100;
+  }
+
   h1 {
     width: 100%;
   }