From 065bf2b0605cdab4ed858a7ae232038d8c4ea2a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20Cora=C3=A7=C3=A3o?= <nunocoracao@gmail.com>
Date: Wed, 6 Dec 2023 21:40:38 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Implement=20loaders=20for=20fetc?=
 =?UTF-8?q?hed=20information=20(views=20and=20likes)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/compiled/main.css     | 32 ++++++++++++++++++++++++++++++++
 assets/js/process.js             | 10 ++++++++++
 config.toml                      |  2 +-
 layouts/partials/meta/likes.html |  7 ++++---
 layouts/partials/meta/views.html |  7 ++++---
 5 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 8499361fe..450d12c0a 100644
--- a/assets/css/compiled/main.css
+++ b/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));
diff --git a/assets/js/process.js b/assets/js/process.js
index a267914a2..9f87fc904 100644
--- a/assets/js/process.js
+++ b/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)
             }
         })
diff --git a/config.toml b/config.toml
index 50de704ee..67be15380 100644
--- a/config.toml
+++ b/config.toml
@@ -2,4 +2,4 @@
   [module.hugoVersion]
     extended = true
     min = "0.87.0"
-    max = "0.120.4"
\ No newline at end of file
+    max = "0.121.0"
\ No newline at end of file
diff --git a/layouts/partials/meta/likes.html b/layouts/partials/meta/likes.html
index ac07fb6b9..d0c51818d 100644
--- a/layouts/partials/meta/likes.html
+++ b/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 */ -}}
\ No newline at end of file
diff --git a/layouts/partials/meta/views.html b/layouts/partials/meta/views.html
index 420a2d6cb..a7a6945dc 100644
--- a/layouts/partials/meta/views.html
+++ b/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 */ -}}