Add message when no service is loaded

resources/index.html

@@ -33,6 +33,7 @@
 <div id="services">
     <div class="loader"></div>
     <div id="url-preview" class="hidden"></div>
+    <div id="empty-message">Load a service using the menu on the left.</div>
 </div>
 </body>
 

resources/style/index.css

@@ -242,3 +242,16 @@ body {
 #url-preview.hidden {
     opacity: 0;
 }
+
+#services > #empty-message {
+    display: flex !important;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+#services > .loader:not(.hidden) ~ #empty-message {
+    display: none !important;
+}