Fix map points: icons, color updates, loading state

- Add entityType prop to CatalogMap for icon selection
- Change circle layers to symbol layers with entity-specific icons
- Icons: shopping bag (offers), warehouse (hubs), factory (suppliers)
- Add watcher to update colors when pointColor/entityType changes
- Clear old points and show loading indicator when switching view modes
- Add clearNodes function to useClusteredNodes composable

app/components/page/CatalogPage.vue

@@ -20,6 +20,7 @@
           :clustered-points="useServerClustering ? clusteredNodes : []"
           :use-server-clustering="useServerClustering"
           :point-color="activePointColor"
+          :entity-type="activeEntityType"
           :hovered-item-id="hoveredId"
           :hovered-item="hoveredItem"
           @select-item="onMapSelect"
@@ -28,6 +29,15 @@
       </ClientOnly>
     </div>
 
+    <!-- View mode loading indicator -->
+    <div
+      v-if="clusterLoading"
+      class="absolute top-[116px] left-1/2 -translate-x-1/2 z-30 flex items-center gap-2 bg-black/50 backdrop-blur-md rounded-full px-4 py-2 border border-white/20"
+    >
+      <span class="loading loading-spinner loading-sm text-white" />
+      <span class="text-white text-sm">{{ $t('common.loading') }}</span>
+    </div>
+
     <!-- View toggle (top RIGHT overlay, below header) - works in both modes -->
     <div class="absolute top-[116px] right-4 z-20 hidden lg:block">
       <div class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
@@ -145,6 +155,15 @@ const VIEW_MODE_COLORS = {
 
 const activePointColor = computed(() => VIEW_MODE_COLORS[mapViewMode.value] || VIEW_MODE_COLORS.offers)
 
+// Entity type for icons based on view mode
+const VIEW_MODE_ENTITY_TYPES = {
+  offers: 'offer',
+  hubs: 'hub',
+  suppliers: 'supplier'
+} as const
+
+const activeEntityType = computed(() => VIEW_MODE_ENTITY_TYPES[mapViewMode.value] || VIEW_MODE_ENTITY_TYPES.offers)
+
 // Node type for server clustering based on view mode
 const VIEW_MODE_NODE_TYPES = {
   offers: 'offer',
@@ -154,6 +173,9 @@ const VIEW_MODE_NODE_TYPES = {
 
 const activeClusterNodeType = computed(() => VIEW_MODE_NODE_TYPES[mapViewMode.value] || VIEW_MODE_NODE_TYPES.offers)
 
+// Store current bounds for refetching when view mode changes
+const currentBounds = ref<MapBounds | null>(null)
+
 interface MapItem {
   uuid: string
   latitude?: number | null
@@ -189,7 +211,17 @@ const emit = defineEmits<{
 }>()
 
 // Server-side clustering - use computed node type based on view mode
-const { clusteredNodes, fetchClusters } = useClusteredNodes(undefined, activeClusterNodeType)
+const { clusteredNodes, fetchClusters, loading: clusterLoading, clearNodes } = useClusteredNodes(undefined, activeClusterNodeType)
+
+// Refetch clusters when view mode changes
+watch(mapViewMode, async () => {
+  // Clear old data first
+  clearNodes()
+  // Refetch with current bounds if available
+  if (currentBounds.value) {
+    await fetchClusters(currentBounds.value)
+  }
+})
 
 // Map refs
 const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
@@ -225,6 +257,7 @@ const itemsWithCoords = computed(() =>
 )
 
 const onBoundsChange = (bounds: MapBounds) => {
+  currentBounds.value = bounds
   emit('bounds-change', bounds)
   if (props.useServerClustering) {
     fetchClusters(bounds)