From 10dcd8717ae5700381a48fffba07f78dc603a317 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 29 Nov 2025 13:24:07 +0100
Subject: [PATCH] feat: add skeleton on no content that looks like loading

---
 src/components/FluxNote.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue
index 504cf4f..96c68a6 100644
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -63,12 +63,14 @@ const renderedContent = computed(() =>
     : store.readme,
 )
 
-const hasContent = computed(() => !!renderedContent.value)
 const isLoading = computed(() => renderedContent.value === undefined)
+const hasContent = computed(() => !!renderedContent.value)
 
 watch(
   renderedContent,
   async () => {
+    console.log(renderedContent.value)
+
     await nextTick()
     listenToClick()
   },
@@ -112,7 +114,15 @@ onUnmounted(() => {
       </div>
       <slot />
       <lite-loading v-if="isLoading" />
-      <div v-else-if="!hasContent">No content here 📝</div>
+      <div v-else-if="!hasContent" class="flex w-full flex-col gap-4">
+        <div class="skeleton h-4 w-full"></div>
+        <div class="skeleton h-4 w-full"></div>
+        <div class="skeleton h-4 w-full"></div>
+        <div class="skeleton h-4 w-full"></div>
+        <div class="skeleton h-4 w-full"></div>
+        <div class="skeleton h-4 w-full"></div>
+        <div class="skeleton h-4 w-28"></div>
+      </div>
       <p
         v-else-if="withContent"
         class="note-display"