From 11d4814f2f31b587ca61f18fe8c6a016bc7ec337 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 29 Nov 2025 13:33:13 +0100
Subject: [PATCH] feat: add a countdown animation for offline note progress

---
 src/components/FluxNote.vue                  |  9 ++++++---
 src/modules/note/components/CacheAllNote.vue | 11 ++++++++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue
index 96c68a6..7cea274 100644
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -113,15 +113,18 @@ onUnmounted(() => {
         <cache-all-notes />
       </div>
       <slot />
-      <lite-loading v-if="isLoading" />
-      <div v-else-if="!hasContent" class="flex w-full flex-col gap-4">
+      <div
+        v-if="isLoading || !hasContent"
+        class="flex w-full flex-col gap-4 mt-12"
+      >
+        <div class="skeleton h-4 w-32 mb-2"></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-full"></div>
-        <div class="skeleton h-4 w-28"></div>
+        <div class="skeleton h-4 w-44"></div>
       </div>
       <p
         v-else-if="withContent"
diff --git a/src/modules/note/components/CacheAllNote.vue b/src/modules/note/components/CacheAllNote.vue
index 2baab94..81c571d 100644
--- a/src/modules/note/components/CacheAllNote.vue
+++ b/src/modules/note/components/CacheAllNote.vue
@@ -19,7 +19,16 @@ const confirmBeforeCachingAllNotes = async () => {
       class="progress progress-accent w-56"
       :max="totalOfNotes"
     ></progress>
-    <div>{{ noteCompleted }}/{{ totalOfNotes }}</div>
+    <div>
+      <span class="countdown">
+        <span
+          :style="{ '--value': noteCompleted }"
+          aria-live="polite"
+          :aria-label="`${noteCompleted}`"
+          >{{ noteCompleted }}</span
+        ></span
+      >/{{ totalOfNotes }}
+    </div>
   </div>
   <button v-else class="button" @click="() => confirmBeforeCachingAllNotes()">
     <svg