From 2648d9d1b739d7d4c402b639fa31dcfa9ae5890d Mon Sep 17 00:00:00 2001
From: mtmail <mtmail@gmx.net>
Date: Wed, 17 Feb 2021 15:10:46 +0100
Subject: [PATCH] last update -x ago-, spinner for loading indicator (#83)

---
 package.json                      |  3 ++-
 src/components/LastUpdated.svelte | 12 ++++++++++--
 src/lib/api_utils.js              |  2 +-
 yarn.lock                         |  5 +++++
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 2b23a65..405b30f 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "eslint-plugin-svelte3": "^3.0.0",
     "jquery": "^3.5.1",
     "leaflet": "^1.7.1",
-    "leaflet-minimap": "^3.6.1"
+    "leaflet-minimap": "^3.6.1",
+    "timeago.js": "^4.0.2"
   }
 }
diff --git a/src/components/LastUpdated.svelte b/src/components/LastUpdated.svelte
index ccf1338..3f914ce 100644
--- a/src/components/LastUpdated.svelte
+++ b/src/components/LastUpdated.svelte
@@ -1,4 +1,5 @@
 <script>
+  import * as timeago from 'timeago.js';
   import { last_api_request_url_store } from '../lib/stores.js';
   import { fetch_from_api } from '../lib/api_utils.js';
 
@@ -15,13 +16,16 @@
 
 <style>
   #last-updated {
+    position: relative;
     font-size: 0.8rem;
     font-style: italic;
   }
   #loading {
     display: none;
     position: absolute;
+    padding: 0.5em 1em;
     top: 0;
+    left: 0;
     width: 100%;
     background-color: #eee;
     z-index: 100;
@@ -29,9 +33,12 @@
 </style>
 
 <div id="last-updated" class="container-fluid py-2 px-4 mb-3">
+  <div id="loading" class="py-2 px-4">
+    <div class="spinner-border spinner-border-sm text-primary mr-1" role="status"></div>
+    Loading data from API ...
+  </div>
   <div class="row">
     <div class="col-sm-6">
-      <div id="loading">loading...</div>
       {#if last_api_request_url}
         <div id="api-request">
           Data from <a href="{last_api_request_url}">API request</a>
@@ -43,7 +50,8 @@
     </div>
     <div class="col-sm-6 text-right">
       {#if last_updated_date}
-        Data last updated: <span id="data-date">{last_updated_date}</span>
+        Data last updated:
+        <abbr id="data-date" title="{last_updated_date} (UTC timezone)">{timeago.format(new Date(last_updated_date))}</abbr>
       {/if}
     </div>
   </div>
diff --git a/src/lib/api_utils.js b/src/lib/api_utils.js
index 70acda6..8470b0b 100644
--- a/src/lib/api_utils.js
+++ b/src/lib/api_utils.js
@@ -7,7 +7,7 @@ function api_request_progress(status) {
   var loading_el = document.getElementById('loading');
   if (!loading_el) return; // might not be on page yet
 
-  loading_el.style.display = (status === 'start') ? 'block' : 'none';
+  loading_el.style.display = (status === 'start') ? 'block' : null;
 }
 
 export async function fetch_from_api(endpoint_name, params, callback) {
diff --git a/yarn.lock b/yarn.lock
index ea6769c..176265d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1592,6 +1592,11 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+timeago.js@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/timeago.js/-/timeago.js-4.0.2.tgz#724e8c8833e3490676c7bb0a75f5daf20e558028"
+  integrity sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
-- 
2.43.2