✨ (note) display loading icon

src/assets/icons/loading.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rotate-clockwise" width="24" height="24" viewBox="0 0 24 24" stroke="#3b7e70" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
+</svg>

src/components/FluxNote.vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="flux-note content note-container" v-if="!isLoading">
+  <main class="flux-note content note-container">
     <div class="note readme">
       <header-note class="header" :user="user" :repo="repo" />
       <div class="repo-title-breadcrumb">
@@ -18,7 +18,14 @@
         </h4>
       </div>
       <slot />
-      <div v-if="!hasContent">
+      <div v-if="isLoading" class="loading">
+        <img
+          class="is-loading"
+          src="@/assets/icons/loading.svg"
+          alt="loading..."
+        />
+      </div>
+      <div v-else-if="!hasContent">
         No content here 📝
       </div>
       <p class="note-display" v-html="renderedContent"></p>
@@ -201,6 +208,17 @@ $header-height: 40px;
       max-width: 620px;
     }
   }
+
+  .loading {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+
+    .is-loading {
+      animation: spinAround 0.8s infinite linear;
+    }
+  }
 }
 
 @media screen and (max-width: 768px) {