From 3106b6688e23b81f5bbfb04643d8d6fa85c81646 Mon Sep 17 00:00:00 2001
From: dgtlmoon <dgtlmoon@gmail.com>
Date: Sun, 12 Jun 2022 12:52:17 +0200
Subject: [PATCH] Watch overview list - adding spinner to make it easier to see
 whats currently being 'Checked'

---
 changedetectionio/__init__.py                 |  2 +-
 changedetectionio/static/styles/styles.css    | 44 +++++++++++++++-
 changedetectionio/static/styles/styles.scss   | 52 ++++++++++++++++++-
 .../templates/watch-overview.html             |  2 +-
 4 files changed, 96 insertions(+), 4 deletions(-)

diff --git a/changedetectionio/__init__.py b/changedetectionio/__init__.py
index 9bba1c8a..d738aa5e 100644
--- a/changedetectionio/__init__.py
+++ b/changedetectionio/__init__.py
@@ -108,7 +108,7 @@ def _jinja2_filter_datetime(watch_obj, format="%Y-%m-%d %H:%M:%S"):
     # Worker thread tells us which UUID it is currently processing.
     for t in running_update_threads:
         if t.current_uuid == watch_obj['uuid']:
-            return "Checking now.."
+            return '<span class="loader"></span><span> Checking now</span>'
 
     if watch_obj['last_checked'] == 0:
         return 'Not yet'
diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css
index 724be932..0acbbd9c 100644
--- a/changedetectionio/static/styles/styles.css
+++ b/changedetectionio/static/styles/styles.css
@@ -353,6 +353,8 @@ and also iPads specifically.
     /* Hide table headers (but not display: none;, for accessibility) */ }
     .watch-table thead, .watch-table tbody, .watch-table th, .watch-table td, .watch-table tr {
       display: block; }
+    .watch-table .last-checked > span {
+      vertical-align: middle; }
     .watch-table .last-checked::before {
       color: #555;
       content: "Last Checked "; }
@@ -370,7 +372,8 @@ and also iPads specifically.
     .watch-table td {
       /* Behave  like a "row" */
       border: none;
-      border-bottom: 1px solid #eee; }
+      border-bottom: 1px solid #eee;
+      vertical-align: middle; }
       .watch-table td:before {
         /* Top/left values mimic padding */
         top: 6px;
@@ -490,3 +493,42 @@ ul {
 
 #api-key-copy {
   color: #0078e7; }
+
+/* spinner */
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10px;
+  height: 10px; }
+
+.loader {
+  margin: 0px auto;
+  font-size: 3px;
+  vertical-align: middle;
+  display: inline-block;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(38, 104, 237, 0.2);
+  border-right: 1.1em solid rgba(38, 104, 237, 0.2);
+  border-bottom: 1.1em solid rgba(38, 104, 237, 0.2);
+  border-left: 1.1em solid #2668ed;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear; }
+
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg); }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg); } }
+
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg); }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg); } }
diff --git a/changedetectionio/static/styles/styles.scss b/changedetectionio/static/styles/styles.scss
index ca97be4a..76e33b22 100644
--- a/changedetectionio/static/styles/styles.scss
+++ b/changedetectionio/static/styles/styles.scss
@@ -487,6 +487,11 @@ and also iPads specifically.
       display: block;
     }
 
+    .last-checked {
+      > span {
+        vertical-align: middle;
+      }
+    }
     .last-checked::before {
       color: #555;
       content: "Last Checked ";
@@ -517,7 +522,7 @@ and also iPads specifically.
       /* Behave  like a "row" */
       border: none;
       border-bottom: 1px solid #eee;
-
+      vertical-align: middle;
       &:before {
         /* Top/left values mimic padding */
         top: 6px;
@@ -701,3 +706,48 @@ ul {
 #api-key-copy {
   color: #0078e7;
 }
+
+/* spinner */
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+}
+.loader {
+  margin: 0px auto;
+  font-size: 3px;
+  vertical-align: middle;
+  display: inline-block;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(38,104,237, 0.2);
+  border-right: 1.1em solid rgba(38,104,237, 0.2);
+  border-bottom: 1.1em solid rgba(38,104,237, 0.2);
+  border-left: 1.1em solid #2668ed;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
diff --git a/changedetectionio/templates/watch-overview.html b/changedetectionio/templates/watch-overview.html
index ea866c87..b247fc7a 100644
--- a/changedetectionio/templates/watch-overview.html
+++ b/changedetectionio/templates/watch-overview.html
@@ -67,7 +67,7 @@
                     <span class="watch-tag-list">{{ watch.tag}}</span>
                     {% endif %}
                 </td>
-                <td class="last-checked">{{watch|format_last_checked_time}}</td>
+                <td class="last-checked">{{watch|format_last_checked_time|safe}}</td>
                 <td class="last-changed">{% if watch.history_n >=2 and watch.last_changed %}
                     {{watch.last_changed|format_timestamp_timeago}}
                     {% else %}