[enhancement] Memoize PriceMap icon creation for performance

[pragnyanramtha]

Enhancement Description

The createCustomIcon function in PriceMap.tsx creates a new SVG icon on every call without memoization, causing unnecessary re-renders.

Location

frontend/app/components/PriceMap.tsx (lines 9-25)

Current Code

const createCustomIcon = (isCheapest: boolean) => {
  const color = isCheapest ? "#10b981" : "#ef4444";
  const size = isCheapest ? "40px" : "32px";
  const anchorY = isCheapest ? 40 : 32;

  const svgIcon = `<svg ...>`;
  
  return L.divIcon({
    className: "custom-leaflet-icon bg-transparent border-none",
    html: svgIcon,
    // ...
  });
};

Problem

• New icon created on every render
• SVG string recreated each time
• L.divIcon() called repeatedly

Suggested Fix

Use useMemo or create icon instances outside the component:

const cheapestIcon = L.divIcon({ /* ... */ });
const regularIcon = L.divIcon({ /* ... */ });

// Then use conditionally
const icon = isCheapest ? cheapestIcon : regularIcon;

Impact

• Better rendering performance
• Fewer object allocations
• Smoother map interactions

Labels

enhancement, frontend, performance

[Saranyadharani]

Hi @pragnyanramtha
I can optimize this performance issue!

My approach:

1. Move icon creation outside component using useMemo
2. Create cheapestIcon and regularIcon instances once
3. Reuse icons instead of recreating on every render
4. Will reduce re-renders and improve map performance

Also, could you please add the NSoC'26 label to this issue for tracking?

Please assign this to me.

Thanks!