🎨 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)
             }
         })