From dd616fda41cea5c65ba84f02b2c2b9f4bc9a027f Mon Sep 17 00:00:00 2001
From: Bangara Raju Kottedi <bangararaju.kottedi@gmail.com>
Date: Mon, 21 Aug 2023 00:21:20 +0530
Subject: [PATCH] added loader to the view count and some code refactoring

---
 _config-prod.yml            | 3 +++
 _config-uat.yml             | 3 +++
 _config.yml                 | 4 ++--
 _includes/loader.html       | 1 +
 _includes/post-counter.html | 7 +++++--
 _layouts/post.html          | 2 +-
 6 files changed, 15 insertions(+), 5 deletions(-)
 create mode 100644 _includes/loader.html

diff --git a/_config-prod.yml b/_config-prod.yml
index 7d13ad5..be4c6c1 100644
--- a/_config-prod.yml
+++ b/_config-prod.yml
@@ -3,6 +3,9 @@ id: 'blog'
 
 url: "https://blog.kottedi.in"
 
+show_drafts: false
+future: false
+
 # Custom configuration
 custom-config:
   blog-services:
diff --git a/_config-uat.yml b/_config-uat.yml
index c4415d7..c86625e 100644
--- a/_config-uat.yml
+++ b/_config-uat.yml
@@ -3,6 +3,9 @@ id: 'blog-uat'
 
 url: "https://blog-uat.kottedi.in"
 
+show_drafts: true
+future: true
+
 # Custom configuration
 custom-config:
   blog-services:
diff --git a/_config.yml b/_config.yml
index 8bbe716..193e88c 100644
--- a/_config.yml
+++ b/_config.yml
@@ -198,8 +198,8 @@ jekyll-archives:
     tag: /tags/:name/
     category: /categories/:name/
 
-show_drafts: false
-future: false
+show_drafts: true
+future: true
 
 
 # Custom configuration
diff --git a/_includes/loader.html b/_includes/loader.html
new file mode 100644
index 0000000..cde5386
--- /dev/null
+++ b/_includes/loader.html
@@ -0,0 +1 @@
+<i id="{{include.id}}" class="fa-solid fa-circle-notch fa-spin"></i>
\ No newline at end of file
diff --git a/_includes/post-counter.html b/_includes/post-counter.html
index 093be3e..37335d7 100644
--- a/_includes/post-counter.html
+++ b/_includes/post-counter.html
@@ -1,10 +1,12 @@
 <i class="fa fa-eye fa-fw me-1" {% if include.tooltip %} title="{{site.data.locales[include.lang].post.views}}"
   data-bs-toggle="tooltip" data-bs-placement="bottom" {% endif %}></i>
+{% include loader.html id="postcountloader" %}
 <em id="visit-count">
 </em>
 
 <script>
-  document.getElementById("postvisitcounter").style.visibility = "hidden";
+  document.getElementById("visit-count").style.display = "none";
+  document.getElementById("postcountloader").style.display = "inline-block";
   function ajax(url) {
     return new Promise(function (resolve, reject) {
       var xhr = new XMLHttpRequest();
@@ -24,7 +26,8 @@
     .then(function (result) {
       console.log(result); // Code depending on result
       document.getElementById('visit-count').innerText = result;
-      document.getElementById("postvisitcounter").style.visibility = "visible";
+      document.getElementById("postcountloader").style.display = "none";
+      document.getElementById("visit-count").style.display = "inline-block";
     })
     .catch(function () {
       // An error occurred
diff --git a/_layouts/post.html b/_layouts/post.html
index 718f8d8..7a723cc 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -33,7 +33,7 @@ tail_includes:
     </div>
 
     <!-- post counter -->
-    <div id="postvisitcounter">
+    <div>
       <!-- {{ site.data.locales[lang].post.views }}  -->
       {% include post-counter.html tooltip=true lang=lang %}
     </div>