Add a loading spinner

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} />

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>