muestro un loading cuando cargo posicion de buses

src/pages/mapas/FiltroRutas.svelte

@@ -7,6 +7,7 @@
     export let codigo;
     export let ver_buses;
     export let ver_paraderos;
+    export let loading = false;
 
     let operadores = []
     let lineas = []
@@ -82,5 +83,11 @@
             <label class="form-check-label" for="check-ver-paraderos">Ver Paraderos</label>
         </div>
 
+        {#if loading}
+            <div class="spinner-grow spinner-grow-sm text-danger" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        {/if}
+
     </div>
 </div>

src/pages/mapas/Rutas.svelte

@@ -37,6 +37,8 @@
     let markers_paraderos = []
     let markers_buses = []
     let timeInterval = null
+    let fileproto = null
+    let loading_proto = false
 
     onMount(() => {
         create_map()
@@ -161,25 +163,37 @@
             return;
         }
         
-        const buses = await getBusesLinea(id_linea)
+        loading_proto = true
+        try {
+            const { fileproto: nuevoNombre, buses } = await getBusesLinea(id_linea)
+            if (nuevoNombre !== fileproto) {
+                // guardo el nombre del archivo proto
+                fileproto = nuevoNombre
+    
+                // 1. eliminar marcadores anteriores
+                markers_buses.forEach(marker => marker.remove())
         
-        // 1. eliminar marcadores anteriores
+                // 2. crear marcadores
-        markers_buses.forEach(marker => marker.remove())
+                for (let mark of buses) {
-
+                    const { latitude: lat, longitude: lng } = mark
-        // 2. crear marcadores
+                    const marker = L.marker([lat, lng], { icon: iconAutobus }).addTo(myMap)
-        for (let mark of buses) {
+                    const html = `${mark.Patente_vehiculo}<br>Velocidad: ${mark.speed}`
-            const { latitude: lat, longitude: lng } = mark
+        
-            const marker = L.marker([lat, lng], { icon: iconAutobus }).addTo(myMap)
+                    marker.bindTooltip(html)
-            const html = `${mark.Patente_vehiculo}<br>Velocidad: ${mark.speed}`
+                    markers_buses.push(marker)
-
+                }
-            marker.bindTooltip(html)
+            }
-            markers_buses.push(marker)
+        } catch (error) {
+            console.log({ error })
+        } finally {
+            loading_proto = false
         }
 
-        // actualizar posicion de buses cada 30 segundos
+        // actualizar posicion de buses cada 45 segundos
         if (!timeInterval) {
-            timeInterval = globalThis.setInterval(() => onMostrarBuses(true), 30000)
+            timeInterval = globalThis.setInterval(() => onMostrarBuses(true), 45000)
         }
+        
     }
 
 
@@ -209,7 +223,9 @@
             bind:codigo={codigo}
             bind:ver_buses={ver_buses}
             bind:ver_paraderos={ver_paraderos}
+            loading={loading_proto}
         />
+        
     </div>
 
     {#if id_operador && codigo}