From 82539bfc603e172c67e0420478a4b1ae262ea566 Mon Sep 17 00:00:00 2001
From: Adam Goldsmith <adam@adamgoldsmith.name>
Date: Sun, 6 Jan 2019 10:20:42 -0500
Subject: [PATCH] Add a loading icon for deck upload

---
 src/Editor.vue | 11 +++++++++--
 src/Loader.vue | 27 +++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 src/Loader.vue

diff --git a/src/Editor.vue b/src/Editor.vue
index abadae6..b022c2e 100644
--- a/src/Editor.vue
+++ b/src/Editor.vue
@@ -4,6 +4,7 @@
     <div id="controls">
       <div>
         <button type="button" @click="upload"> Save Deck </button>
+        <Loader :loading="uploading"></Loader>
         Download:
         <button type="button" @click="jsonInputDownload">
           Input JSON
@@ -57,14 +58,16 @@
 <script>
  import yaml from 'js-yaml';
  import Deck from './Deck.vue';
+ import Loader from './Loader.vue';
 
  export default {
    name: 'Editor',
-   components: {Deck},
+   components: {Deck, Loader},
 
    props: ['deckID'],
    data() {
      return {
+       uploading: false,
        selected: null,
        deckInfo: {meta: {name: "", type: ""},
                   cards: {}},
@@ -119,6 +122,7 @@
 
      upload() {
        // POST the inputed json to the server
+       this.uploading = true;
        fetch('/upload', {
          method: 'post',
          headers: {'Content-Type': 'application/json'},
@@ -129,7 +133,10 @@
            css: document.styleSheets[0].href,
          })})
          .then(r => r.json())
-         .then(j => this.$router.replace('/edit/' + j.id))
+         .then(j => {
+           this.$router.replace('/edit/' + j.id);
+           this.uploading = false;
+         })
          .catch(err => console.log('Failed to upload' + err));
      },
    },
diff --git a/src/Loader.vue b/src/Loader.vue
new file mode 100644
index 0000000..0e793f5
--- /dev/null
+++ b/src/Loader.vue
@@ -0,0 +1,27 @@
+<template>
+  <div v-show="loading" class="loader"> </div>
+</template>
+
+<script>
+ export default {
+   name: "Loader",
+   props: ['loading'],
+ }
+</script>
+
+<style>
+ .loader {
+   display: inline-block;
+   border: .33em solid #f3f3f3; /* Light grey */
+   border-top: .33em solid #3498db; /* Blue */
+   border-radius: 50%;
+   width: .33em;
+   height: .33em;
+   animation: spin 2s linear infinite;
+ }
+
+ @keyframes spin {
+   0% { transform: rotate(0deg); }
+   100% { transform: rotate(360deg); }
+ }
+</style>