From 497a80f0c68dc253279d502814b8dfb5d050963b Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Tue, 27 Jan 2026 12:21:35 +0700
Subject: [PATCH] Fix camera jumping - debounce fitBounds when points load

---
 app/components/catalog/CatalogMap.vue | 30 ++++++++++++++++++---------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/app/components/catalog/CatalogMap.vue b/app/components/catalog/CatalogMap.vue
index 0ebf406..15c4770 100644
--- a/app/components/catalog/CatalogMap.vue
+++ b/app/components/catalog/CatalogMap.vue
@@ -693,25 +693,35 @@ watch(() => props.hoveredItem, () => {
   }
 }, { deep: true })
 
-// Update related points layer when relatedPoints changes + fit bounds
+// Debounced fitBounds to avoid camera jumping when points load incrementally
+let fitBoundsTimeout: ReturnType<typeof setTimeout> | null = null
+
+// Update related points layer when relatedPoints changes + fit bounds (debounced)
 watch(() => props.relatedPoints, (points) => {
   if (!mapRef.value || !mapInitialized.value) return
 
-  // Update the source data
+  // Update the source data immediately
   const source = mapRef.value.getSource(relatedSourceId.value) as mapboxgl.GeoJSONSource | undefined
   if (source) {
     source.setData(relatedPointsGeoJson.value)
   }
 
-  // Fit bounds to show all related points (Info mode)
+  // Debounce fitBounds - wait for all points to load before zooming
+  if (fitBoundsTimeout) {
+    clearTimeout(fitBoundsTimeout)
+  }
+
   if (points && points.length > 0) {
-    const bounds = new LngLatBounds()
-    points.forEach(p => {
-      bounds.extend([p.longitude, p.latitude])
-    })
-    if (!bounds.isEmpty()) {
-      mapRef.value.fitBounds(bounds, { padding: 80, maxZoom: 12 })
-    }
+    fitBoundsTimeout = setTimeout(() => {
+      if (!mapRef.value) return
+      const bounds = new LngLatBounds()
+      points.forEach(p => {
+        bounds.extend([p.longitude, p.latitude])
+      })
+      if (!bounds.isEmpty()) {
+        mapRef.value.fitBounds(bounds, { padding: 80, maxZoom: 12 })
+      }
+    }, 300) // Wait 300ms for all points to load
   }
 }, { deep: true })