feat: add a countdown animation for offline note progress

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"

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