add loader

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,

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 () {