Show a loading state in the strategy dropdown

While the strategy list is being fetched the dropdown now shows a disabled
"Loading strategies…" option instead of an empty select, and "No strategies
available" once loading finishes with no results. Applies to the strategy,
backtest and sweep panels via a loading prop. Adds tests.

frontend/src/components/BacktestPanel.vue

@@ -9,6 +9,7 @@ import StrategyForm from './StrategyForm.vue'
 defineProps({
   strategies: { type: Array, required: true },
   status: { type: Object, required: true },
+  loading: { type: Boolean, default: false },
 })
 
 const running = ref(false)
@@ -44,6 +45,7 @@ async function run(payload) {
       :busy="running"
       :symbol="status.symbol"
       :timeframe="status.timeframe"
+      :loading="loading"
       submit-label="Run backtest"
       @submit="run"
     />

frontend/src/components/StrategyForm.vue

@@ -10,6 +10,9 @@ const props = defineProps({
   symbol: { type: String, default: 'BTC/USDT' },
   timeframe: { type: String, default: '5m' },
   presets: { type: Array, default: () => [] },
+  // True while the strategy list is still being fetched, so the dropdown can
+  // show a loading state instead of appearing empty.
+  loading: { type: Boolean, default: false },
 })
 const emit = defineEmits(['submit', 'save-preset', 'delete-preset', 'load-preset'])
 
@@ -99,7 +102,14 @@ function submit() {
     <div class="grid gap-2 sm:grid-cols-3">
       <label class="space-y-1">
         <span class="label">Strategy</span>
-        <select v-model="selectedKey" class="input" :disabled="disabled">
+        <select
+          v-model="selectedKey"
+          class="input"
+          :disabled="disabled || !strategies.length"
+        >
+          <option v-if="!strategies.length" value="" disabled>
+            {{ loading ? 'Loading strategies…' : 'No strategies available' }}
+          </option>
           <option v-for="s in strategies" :key="s.key" :value="s.key">{{ s.name }}</option>
         </select>
       </label>

frontend/src/components/StrategyPanel.vue

@@ -8,6 +8,7 @@ const props = defineProps({
   status: { type: Object, required: true },
   busy: { type: Boolean, default: false },
   presets: { type: Array, default: () => [] },
+  loading: { type: Boolean, default: false },
 })
 const emit = defineEmits(['start', 'stop', 'kill', 'save-preset', 'delete-preset'])
 
@@ -34,6 +35,7 @@ function confirmKill() {
         :symbol="status.symbol"
         :timeframe="status.timeframe"
         :presets="presets"
+        :loading="loading"
         @submit="emit('start', $event)"
         @save-preset="emit('save-preset', $event)"
         @delete-preset="emit('delete-preset', $event)"

frontend/src/components/SweepPanel.vue

@@ -7,6 +7,7 @@ import CollapsiblePanel from './CollapsiblePanel.vue'
 const props = defineProps({
   strategies: { type: Array, required: true },
   status: { type: Object, required: true },
+  loading: { type: Boolean, default: false },
 })
 
 const running = ref(false)
@@ -97,7 +98,10 @@ async function run() {
     <div class="grid gap-2 sm:grid-cols-4">
       <label class="space-y-1">
         <span class="label">Strategy</span>
-        <select v-model="selectedKey" class="input" :disabled="running">
+        <select v-model="selectedKey" class="input" :disabled="running || !strategies.length">
+          <option v-if="!strategies.length" value="" disabled>
+            {{ loading ? 'Loading strategies…' : 'No strategies available' }}
+          </option>
           <option v-for="s in strategies" :key="s.key" :value="s.key">{{ s.name }}</option>
         </select>
       </label>