Don't show error symbol when loading unless error

webapp/src/components/loadingContent.vue

@@ -4,9 +4,9 @@
       <div uk-spinner="ratio: 3"></div>
       <p>Loading...</p>
     </div>
-    <span class="material-symbols-outlined uk-align-center error-icon">error_outline</span>
+    <div v-if="error" id="error-container" class="uk-align-center">
-    <div v-if="error" class="uk-align-center">
+      <span class="material-symbols-outlined uk-align-center error-icon">error_outline</span>
-      {{ error }}
+      <p>{{ error }}</p>
     </div>
   </div>
 </template>
@@ -26,6 +26,10 @@ export default {
 </script>
 
 <style scoped lang="less">
+#error-container {
+  text-align: center;
+}
+
 .error-icon {
   font-size: 120px;
 }

webapp/src/stores/settings.js

@@ -44,7 +44,8 @@ export const useSettingsStore = defineStore(
     function resetState() {
       waiting.value = false;
       available.value = false;
-      error.value = ""; // TODO: verify that "" is needed to match initial state
+      // On resetState there is no connection.
+      error.value = "Microscope is not connected.";
     }
 
     function setConnected() {