perf: implement list virtualization for scalable product discovery

[DeveloperZeeshu]

📝 Description

As the number of nearby shops grows, rendering hundreds of DOM nodes simultaneously will degrade performance. We need to implement Window Virtualization to ensure the UI remains responsive.

🎯 User Story

As a User, I want to scroll through a long list of nearby shops without the app lagging or crashing my browser.

🛠 Technical Tasks

• Install and integrate react-window or tanstack-virtual.
• Refactor the ProductList and ShopList components to use a virtualized container.
• Synchronize virtualization with existing cursor-based pagination logic.
• Implement Skeleton Loaders for items that are currently being calculated or fetched during fast scrolling.
• Ensure the "Maps" view remains synced with the currently visible virtualized items.

✅ Acceptance Criteria

• Only the items visible in the viewport (plus a small buffer) are rendered in the DOM.
• Maintain a consistent $60fps$ scroll performance even with 100+ items in the data array.
• Cursor-based "Load More" triggers correctly at the end of the virtual list.

🏷 Tags

performance frontend optimization react