From dba0c45de82c331d64ba5e1a8c9039c2a83a6429 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 3 Apr 2021 19:51:27 +0200
Subject: [PATCH] :sparkles: (note) display loading icon

---
 src/assets/icons/loading.svg |  4 ++++
 src/components/FluxNote.vue  | 22 ++++++++++++++++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/icons/loading.svg

diff --git a/src/assets/icons/loading.svg b/src/assets/icons/loading.svg
new file mode 100644
index 0000000..4407a4b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue
index 74bb8b5..0aec3f7 100644
--- a/src/components/FluxNote.vue
+++ b/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) {