add spinny so you know when you hit the submit button

pickledish · Feb 7, 2021 · e3fc8ea · e3fc8ea
1 parent 38daa71
commit e3fc8ea
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 6 deletions.
diff --git a/public/global.css b/public/global.css
@@ -79,3 +79,12 @@ ul {
   @apply list-inside;
   @apply list-disc;
 }
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
@@ -91,6 +91,16 @@
     <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
     <rect x="4" y="4" width="16" height="16" rx="2" />
     <line x1="9" y1="12" x2="15" y2="12" />
+  {:else if kind == "spinny"}
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <line x1="12" y1="6" x2="12" y2="3" />
+    <line x1="16.25" y1="7.75" x2="18.4" y2="5.6" />
+    <line x1="18" y1="12" x2="21" y2="12" />
+    <line x1="16.25" y1="16.25" x2="18.4" y2="18.4" />
+    <line x1="12" y1="18" x2="12" y2="21" />
+    <line x1="7.75" y1="16.25" x2="5.6" y2="18.4" />
+    <line x1="6" y1="12" x2="3" y2="12" />
+    <line x1="7.75" y1="7.75" x2="5.6" y2="5.6" />
   {:else}
     {console.log(`Unknown icon: ${kind}`)}
   {/if}

diff --git a/src/components/NewSnippetModal.svelte b/src/components/NewSnippetModal.svelte
@@ -1,6 +1,8 @@
 <script>
 
   import Cookie from 'js-cookie'
+
+  import Icon from './Icon.svelte'
   import Modal from './Modal.svelte'
   import TagSelect from './TagSelect.svelte'
 
@@ -14,11 +16,14 @@
   let title_str = "";
   let content = "";
 
-  let selected = null;
+  let status = "NONE";
+  let selectedTags = null;
 
   async function submit() {
     try {
-      let boards = selected ? selected.map(elem => elem.value) : [];
+      status = "LOADING";
+
+      let boards = selectedTags ? selectedTags.map(elem => elem.value) : [];
 
       let title = null;
       let search = [];
@@ -48,12 +53,21 @@
 
       window.location.reload();
     } catch (err) {
+      status = "ERROR";
       console.log(err);
     }
   }
 
 </script>
 
+<style>
+
+  .rotate {
+    animation: rotation 2s infinite linear;
+  }
+
+</style>
+
 
 <Modal bind:show={$show_new_snippet_modal}>
   <div class="flex flex-col items-stretch text-grey-700">
@@ -64,23 +78,37 @@
 
     <textarea id="content" class="p-2 my-2 rounded border" placeholder="Text or URL" bind:value={content}></textarea>
 
-    <TagSelect bind:items={selected}/>
+    <TagSelect bind:items={selectedTags}/>
 
     <div class="mt-4">
-      <span class="float-right">
+      <div class="float-right flex items-center">
         <button
           id="cancel"
           on:click="{() => $show_new_snippet_modal = false}"
           class="hover:bg-desk-300 dark:text-white py-1 px-3 rounded">
           Cancel
         </button>
+        {#if status == "NONE"}
         <button
           id="submit"
           on:click="{submit}"
-          class="bg-sage-300 dark:bg-sage-700 dark:text-white py-1 px-3 rounded">
+          class="bg-sage-300 dark:bg-sage-700 dark:text-white py-1 px-3 rounded w-16 text-center">
           Create
         </button>
-      </span>
+        {:else if status == "LOADING"}
+        <div class="bg-sage-300 dark:bg-sage-700 dark:text-white py-1 px-3 rounded w-16 flex justify-center items-center">
+          <div class="rotate w-min"><Icon kind="spinny"/></div>
+        </div>
+        {:else if status == "ERROR"}
+        <div class="bg-sage-300 dark:bg-sage-700 dark:text-white py-1 px-3 rounded w-16 flex justify-center items-center">
+          <Icon kind="missing"/>
+        </div>
+        {:else}
+        <div class="bg-sage-300 dark:bg-sage-700 dark:text-white py-1 px-3 rounded w-16 flex justify-center items-center">
+          <Icon kind="sad"/>
+        </div>
+        {/if}
+      </div>
     </div>
   </div>
 </Modal>