ui_migration refactor(store) use pinia stores in components

webapp/src/components/loadingContent.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="uk-flex uk-flex-column uk-flex-center uk-height-1-1">
-    <div v-if="$store.state.waiting" class="uk-align-center" uk-spinner="ratio: 3"></div>
-    <div v-if="$store.state.waiting" class="uk-align-center">Loading...</div>
+    <div v-if="waiting" class="uk-align-center uk-text-center">
+      <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="$store.state.error" class="uk-align-center">
-      {{ $store.state.error }}
+    <div v-if="error" class="uk-align-center">
+      {{ error }}
     </div>
     <div class="uk-align-center">
       <devTools class="uk-width-medium"></devTools>
@@ -14,6 +16,8 @@
 
 <script>
 import devTools from "./tabContentComponents/aboutComponents/devTools.vue";
+import { mapWritableState } from "pinia";
+import { useSettingsStore } from "@/stores/settings.js";
 
 // Export main app
 export default {
@@ -23,8 +27,8 @@ export default {
     devTools,
   },
 
-  data: function () {
-    return {};
+  computed: {
+    ...mapWritableState(useSettingsStore, ["error", "waiting"]),
   },
 };
 </script>