From 793a45e3df10d21848f65a28fb00276569cd6e17 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Thu, 20 Jul 2023 12:51:00 +0200
Subject: [PATCH] extract loading in a component

---
 src/components/FluxNote.vue    | 20 ++------------------
 src/components/LiteLoading.vue | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 18 deletions(-)
 create mode 100644 src/components/LiteLoading.vue

diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue
index e677fe5..1657b62 100644
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import LiteLoading from '@/components/LiteLoading.vue'
 import { useLinks } from '@/hooks/useLinks.hook'
 import { useMarkdown } from '@/hooks/useMarkdown.hook'
 import { useNote } from '@/hooks/useNote.hook'
@@ -111,13 +112,7 @@ const focus = () => scrollToFocusedNote(undefined, true)
         </h4>
       </div>
       <slot />
-      <div v-if="isLoading" class="loading">
-        <img
-          class="is-loading"
-          src="@/assets/icons/loading.svg"
-          alt="loading..."
-        />
-      </div>
+      <lite-loading v-if="isLoading" />
       <div v-else-if="!hasContent">No content here 📝</div>
       <p
         v-else-if="withContent"
@@ -232,17 +227,6 @@ $header-height: 40px;
       max-width: var(--note-width);
     }
   }
-
-  .loading {
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    align-items: center;
-
-    .is-loading {
-      animation: spinAround 0.8s infinite linear;
-    }
-  }
 }
 
 @media print, screen and (max-width: 768px) {
diff --git a/src/components/LiteLoading.vue b/src/components/LiteLoading.vue
new file mode 100644
index 0000000..d90a74a
--- /dev/null
+++ b/src/components/LiteLoading.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="lite-loading">
+    <img class="is-loading" src="@/assets/icons/loading.svg" alt="loading..." />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.lite-loading {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+
+  .is-loading {
+    animation: spinAround 0.8s infinite linear;
+  }
+}
+</style>