chore: update testing style

src/ModManUi/src/App.vue

@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import { webviewBinds } from "@/native";
 import { useZoneStore } from "@/stores/ZoneStore";
+import SpinningLoader from "@/components/SpinningLoader.vue";
 
 const zoneStore = useZoneStore();
 const lastPath = ref("");
@@ -36,25 +37,35 @@ function onUnloadClicked(zoneName: string) {
     <small>Nothing to see here yet, this is mainly for testing</small>
 
     <p>
-      <button @click="onOpenFastfileClick">Open fastfile</button>
+      <button :disabled="loadingFastFile" @click="onOpenFastfileClick">
-      <span>Loading: {{ loadingFastFile }}</span>
+        <SpinningLoader v-if="loadingFastFile" class="loading" />
+        <span>Load fastfile</span>
+      </button>
     </p>
     <div>
       <h3>Loaded zones:</h3>
-      <div v-for="zone in zoneStore.loadedZones" :key="zone">
+      <div class="zone-list">
-        <span>{{ zone }}</span>
+        <div v-for="zone in zoneStore.loadedZones" :key="zone" class="zone">
-        <button @click="onUnloadClicked(zone)">Unload</button>
+          <span>{{ zone }}</span>
+          <button @click="onUnloadClicked(zone)">Unload</button>
+        </div>
       </div>
     </div>
   </main>
 </template>
 
 <style scoped>
-.logo.vite:hover {
+.loading {
-  filter: drop-shadow(0 0 2em #747bff);
+  margin-right: 0.2em;
 }
 
-.logo.vue:hover {
+.zone-list {
-  filter: drop-shadow(0 0 2em #249b73);
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.5em;
+}
+
+.zone > button {
+  margin-left: 0.5em;
 }
 </style>

src/ModManUi/src/components/SpinningLoader.vue

@@ -0,0 +1,30 @@
+<template>
+  <svg viewBox="0 0 100 100" class="loading-spinner">
+    <circle class="loading-spinner-box" cx="50" cy="50" r="40" fill="transparent" />
+  </svg>
+</template>
+
+<style lang="scss" scoped>
+.loading-spinner {
+  width: 0.8em;
+  height: 0.8em;
+  display: inline-block;
+
+  animation: rotation 1s infinite linear;
+
+  .loading-spinner-box {
+    stroke: currentColor;
+    stroke-width: 10;
+    stroke-dasharray: 100% 100%;
+  }
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

src/ModManUi/src/main.scss

@@ -71,13 +71,17 @@ button {
   cursor: pointer;
 }
 
-button:hover {
+button:not(:disabled):hover {
   border-color: #396cd8;
 }
-button:active {
+button:not(:disabled):active {
   border-color: #396cd8;
   background-color: #e8e8e8;
 }
+button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
 
 input,
 button {
@@ -103,7 +107,7 @@ button {
     color: #ffffff;
     background-color: #0f0f0f98;
   }
-  button:active {
+  button:not(:disabled):active {
     background-color: #0f0f0f69;
   }
 }