From 007f07c7a9bafb6b637869e8713b3db3d845515c Mon Sep 17 00:00:00 2001
From: Sam Stenvall <sam.stenvall@nitor.com>
Date: Sun, 15 Oct 2023 20:13:32 +0300
Subject: [PATCH] Add a loading spinner

---
 webif/src/routes/+page.svelte  |  7 +++--
 webif/src/routes/Loader.svelte | 50 ++++++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 webif/src/routes/Loader.svelte

diff --git a/webif/src/routes/+page.svelte b/webif/src/routes/+page.svelte
index 08df097..abad865 100644
--- a/webif/src/routes/+page.svelte
+++ b/webif/src/routes/+page.svelte
@@ -8,6 +8,7 @@
   import Characteristics from './Characteristics.svelte'
   import MainsPower from './MainsPower.svelte'
   import Circuits from './Circuits.svelte'
+  import Loader from './Loader.svelte'
 
   let configuration
   let webSocketUrl
@@ -62,8 +63,10 @@
   })
 </script>
 
-{#if webSocketUrl === undefined}
-  <p>Please add ?ws=ws://x.x.x.x:yyyy to your URL to connect to a server</p>
+{#if lastUpdateTimestamp === undefined}
+  <div class="pure-u-1-1 l-box">
+    <Loader />
+  </div>
 {:else}
   <div class="pure-u-1-1 l-box">
     <LastUpdate {lastUpdateTimestamp} {webSocketUrl} />
diff --git a/webif/src/routes/Loader.svelte b/webif/src/routes/Loader.svelte
new file mode 100644
index 0000000..c813fea
--- /dev/null
+++ b/webif/src/routes/Loader.svelte
@@ -0,0 +1,50 @@
+<style>
+    /* Source: https://cssloaders.github.io/ */
+    .loader {
+        width: 48px;
+        height: 48px;
+        border: 3px dotted #FFF;
+        border-style: solid solid dotted dotted;
+        border-radius: 50%;
+        display: inline-block;
+        position: relative;
+        box-sizing: border-box;
+        animation: rotation 2s linear infinite;
+    }
+    .loader::after {
+        content: '';
+        box-sizing: border-box;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        border: 3px dotted #FF3D00;
+        border-style: solid solid dotted;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        animation: rotationBack 1s linear infinite;
+        transform-origin: center center;
+    }
+
+    @keyframes rotation {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+    @keyframes rotationBack {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(-360deg);
+        }
+    }
+</style>
+
+<span class="loader"></span>