From 85d20dfe4db1b508b09c1e589cd8b23423083bd2 Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Sat, 11 Apr 2020 23:54:38 +0200
Subject: [PATCH] add loader

---
 resources/js/components/Loader.vue    | 19 +++++++++++++++++++
 resources/js/views/Memo/MemoIndex.vue |  7 ++++++-
 resources/js/views/Memo/MemoShow.vue  |  4 +++-
 resources/js/views/User/UserAdmin.vue |  7 ++++---
 resources/sass/app.scss               |  1 +
 resources/sass/components/loader.scss |  5 +++++
 resources/svg/loader.svg              | 16 ++++++++++++++++
 7 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 resources/js/components/Loader.vue
 create mode 100644 resources/sass/components/loader.scss
 create mode 100644 resources/svg/loader.svg

diff --git a/resources/js/components/Loader.vue b/resources/js/components/Loader.vue
new file mode 100644
index 0000000..2473068
--- /dev/null
+++ b/resources/js/components/Loader.vue
@@ -0,0 +1,19 @@
+<template>
+    <div v-if="loading" class="flex-center">
+        <svg-vue icon="loader" class="loader"/>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Loader",
+        data: function () {
+            return {
+                loading: false,
+            }
+        },
+        mounted() {
+            setTimeout(() => this.loading = true, 250)
+        }
+    }
+</script>
diff --git a/resources/js/views/Memo/MemoIndex.vue b/resources/js/views/Memo/MemoIndex.vue
index b437973..30d9790 100755
--- a/resources/js/views/Memo/MemoIndex.vue
+++ b/resources/js/views/Memo/MemoIndex.vue
@@ -4,7 +4,7 @@
             <a href="#" class="btn" @click="$router.back()">< Back</a>
             <router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
         </div>
-        <div v-if="loading">> Loading...</div>
+        <Loader v-if="loading" />
         <div v-else class="container-cards-list">
             <div v-if="memos.lenght === 0">
                 <p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
@@ -18,8 +18,13 @@
 </template>
 
 <script>
+    import Loader from "../../components/Loader";
+
     export default {
         name: "MemoIndex",
+        components: {
+            Loader
+        },
         data: function () {
             return {
                 loading: true,
diff --git a/resources/js/views/Memo/MemoShow.vue b/resources/js/views/Memo/MemoShow.vue
index 8acd104..815944e 100755
--- a/resources/js/views/Memo/MemoShow.vue
+++ b/resources/js/views/Memo/MemoShow.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="p-2">
-        <div v-if="loading" >> Loading...</div>
+        <Loader v-if="loading" />
         <div v-else>
             <div class="flex-between flex-center mb-1">
                 <router-link to="/memos/" class="btn">< Back</router-link>
@@ -27,6 +27,7 @@
 
 <script>
     // import TagBox from "../Tag/TagBox";
+    import Loader from "../../components/Loader";
     let MarkdownIt = require('markdown-it'),
         md = new MarkdownIt()
             .use(require('markdown-it-checkbox'));
@@ -34,6 +35,7 @@
     export default {
         name: 'MemoShow',
         components: {
+            Loader
             // TagBox
         },
         data: function () {
diff --git a/resources/js/views/User/UserAdmin.vue b/resources/js/views/User/UserAdmin.vue
index 19a2110..196361c 100644
--- a/resources/js/views/User/UserAdmin.vue
+++ b/resources/js/views/User/UserAdmin.vue
@@ -24,7 +24,7 @@
         <div class="mb-2">
             <h2>Liste des utilisateurs</h2>
             <ul>
-                <li v-if="loading">> Loading...</li>
+                <Loader v-if="loading" />
                 <li v-else v-for="user in users"><a :href="user.links.self">{{ user.data.attributes.name }}</a> - {{ user.data.attributes.email }} - {{ user.data.attributes.is_admin }}</li>
             </ul>
         </div>
@@ -38,11 +38,12 @@
     import Avatar from '../../components/Avatar';
     import AlertBox from '../../components/AlertBox';
     import InputField from '../../components/InputField';
+    import Loader from "../../components/Loader";
 
     export default {
         name: 'UserAdmin',
         components: {
-            Avatar, AlertBox, InputField,
+            Avatar, AlertBox, InputField, Loader
         },
         data: function () {
             return {
@@ -53,7 +54,7 @@
                 alertType: '',
                 alertMessage: '',
                 errors: null,
-                loading: '',
+                loading: true,
                 users: null,
             }
         },
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 808ca6c..b44ba02 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -8,6 +8,7 @@
 
 @import "components/btn";
 @import "components/elements";
+@import "components/loader";
 @import "components/events";
 @import "components/main";
 @import "components/nav";
diff --git a/resources/sass/components/loader.scss b/resources/sass/components/loader.scss
new file mode 100644
index 0000000..e112963
--- /dev/null
+++ b/resources/sass/components/loader.scss
@@ -0,0 +1,5 @@
+.loader {
+    margin-top: 25vh;
+    stroke: $dark;
+    width: 10rem;
+}
diff --git a/resources/svg/loader.svg b/resources/svg/loader.svg
new file mode 100644
index 0000000..222b19c
--- /dev/null
+++ b/resources/svg/loader.svg
@@ -0,0 +1,16 @@
+<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#000">
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)" stroke-width="2">
+            <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+            <path d="M36 18c0-9.94-8.06-18-18-18">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="1s"
+                    repeatCount="indefinite"/>
+            </path>
+        </g>
+    </g>
+</svg>