🎨 Implement loaders for fetched information (views and likes)

assets/css/compiled/main.css

@@ -1912,6 +1912,10 @@ select {
   margin-top: 2rem;
 }
 
+.mt-\[-2px\] {
+  margin-top: -2px;
+}
+
 .mt-\[0\.15rem\] {
   margin-top: 0.15rem;
 }
@@ -2160,6 +2164,10 @@ select {
   height: 100vh;
 }
 
+.max-h-3 {
+  max-height: 0.75rem;
+}
+
 .max-h-\[5rem\] {
   max-height: 5rem;
 }
@@ -2671,6 +2679,16 @@ select {
   animation: spinner-grow 0.75s linear infinite;
 }
 
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -3238,6 +3256,11 @@ select {
   background-color: rgba(var(--color-neutral-300), var(--tw-bg-opacity));
 }
 
+.bg-neutral-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-neutral-400), var(--tw-bg-opacity));
+}
+
 .bg-neutral-500\/50 {
   background-color: rgba(var(--color-neutral-500), 0.5);
 }
@@ -4037,6 +4060,10 @@ select {
   color: rgba(var(--color-primary-800), var(--tw-text-opacity));
 }
 
+.text-transparent {
+  color: transparent;
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -7328,6 +7355,11 @@ pre {
   background-color: rgb(79 79 79 / var(--tw-bg-opacity));
 }
 
+:is(.dark .dark\:bg-neutral-400) {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-neutral-400), var(--tw-bg-opacity));
+}
+
 :is(.dark .dark\:bg-neutral-600) {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral-600), var(--tw-bg-opacity));

assets/js/process.js

@@ -6,10 +6,19 @@ if (typeof auth !== 'undefined') {
         return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
     }
 
+    function toggleLoaders(node){
+        var classesString = "animate-pulse inline-block text-transparent max-h-3 rounded-full mt-[-2px] align-middle bg-neutral-400 dark:bg-neutral-400"
+        var classes = classesString.split(" ");
+        for(var i in classes){  
+            node.classList.toggle(classes[i])
+        }
+    }
+
     var update_views = function (node, id) {
         viewsCollection.doc(id).onSnapshot(doc => {
             var data = doc.data();
             if (data) {
+                toggleLoaders(node)
                 node.innerText = numberWithCommas(data.views)
             }
         })
@@ -19,6 +28,7 @@ if (typeof auth !== 'undefined') {
         likesCollection.doc(id).onSnapshot(doc => {
             var data = doc.data();
             if (data) {
+                toggleLoaders(node)
                 node.innerText = numberWithCommas(data.likes)
             }
         })

config.toml

@@ -2,4 +2,4 @@
   [module.hugoVersion]
     extended = true
     min = "0.87.0"
-    max = "0.120.4"
+    max = "0.121.0"

layouts/partials/meta/likes.html

@@ -1,11 +1,12 @@
 <span>
     {{ if eq .Kind "taxonomy"}}
-    <span id="likes_taxonomy_{{ .Page.Data.Plural }}" title="likes">0</span> 
+    <span id="likes_taxonomy_{{ .Page.Data.Plural }}" 
     {{ else if eq .Kind "term"}}
-    <span id="likes_term_{{ .Page.Data.Term }}" title="likes">0</span> 
+    <span id="likes_term_{{ .Page.Data.Term }}" 
     {{ else }}
-    <span id="likes_{{ .File.Path }}" title="likes">0</span> 
+    <span id="likes_{{ .File.Path }}" 
     {{ end }}
+        class="animate-pulse inline-block text-transparent max-h-3 rounded-full mt-[-2px] align-middle bg-neutral-400 dark:bg-neutral-400" title="likes">loading</span> 
     <span class="inline-block align-text-bottom">{{ partial "icon.html" "heart" }}</span>
 </span>
 {{- /* Trim EOF */ -}}

layouts/partials/meta/views.html

@@ -1,11 +1,12 @@
 <span>
     {{ if eq .Kind "taxonomy"}}
-    <span id="views_taxonomy_{{ .Page.Data.Plural }}" title="views">0</span> 
+    <span id="views_taxonomy_{{ .Page.Data.Plural }}"
     {{ else if eq .Kind "term"}}
-    <span id="views_term_{{ .Page.Data.Term }}" title="views">0</span> 
+    <span id="views_term_{{ .Page.Data.Term }}"
     {{ else }}
-    <span id="views_{{ .File.Path }}" title="views">0</span> 
+    <span id="views_{{ .File.Path }}" 
     {{ end }}
+        class="animate-pulse inline-block text-transparent max-h-3 rounded-full mt-[-2px] align-middle bg-neutral-400 dark:bg-neutral-400" title="views">loading</span> 
     <span class="inline-block align-text-bottom">{{ partial "icon.html" "eye" }}</span>
 </span>
 {{- /* Trim EOF */ -}}