perf: improve mobile location detail LCP

[Streetlives-codex]

Motivation

• Mobile Core Web Vitals indicate poor LCP on location detail pages because the interactive Google Maps preview loads behind a mobile detail panel and competes with above-the-fold content.
• The goal is to prioritize the visual element users actually see first (Street View preview) and avoid loading the heavy Google Maps API until it is needed on mobile.

Description

• Replace the interactive mobile map preview with an eagerly-discovered static Street View preview in src/components/location-detail/street-view.tsx, including explicit width/height, loading="eager", fetchPriority="high", and decoding="async" on the preview image to improve LCP.
• Defer initializing the Google Maps API on mobile by adding a shouldLoadMap flag in src/components/map.tsx that only mounts APIProvider when on desktop or when the map is actually visible on mobile, and recomputes on resize.
• Preserve existing behavior on desktop and when mobile users explicitly open the map view, and keep the Street View destination link unchanged.

Testing

• Ran npm run check-types and it completed successfully.
• Ran npm run check-format (Prettier) and it reported no formatting issues.
• Ran npm run test:unit:run (Vitest) and all unit tests passed.
• npm run build failed in CI due to inability to fetch the Inter font from Google Fonts during the build environment network call (not a change in application code).

---

Codex Task

[github-actions]

The new responsive map-loading logic is insufficiently validated and may regress mobile map navigation.

Blocking issues

• On mobile, locationDetailStub unconditionally prevents Google Maps from loading even when showMapViewOnMobile is true. If users can switch from a location detail panel to map view, this produces a blank map. Clarify/fix the intended state logic and add tests covering mobile detail, list, map-toggle, resize, and desktop behavior.

[github-actions]

The map-loading change lacks coverage for the risky component-level behavior it introduces.

Blocking issues

• Tests cover only the pure predicate, not LocationsMap's deferred mount, store-driven toggle, resize listener, or unmount/remount behavior. Add component/integration coverage verifying desktop initialization, mobile map toggling, resizing in both directions, and preservation or intentional loss of map state.

[github-actions]

The mobile location-detail view can regress after this change.

Blocking issues

• MainComponent no longer forces the side panel on /locations/:slug. If showMapViewOnMobile remains true when navigating from the mobile map to a location detail route, the map stays visible and the location details remain hidden. No replacement state reset or regression test covers this route transition.

[github-actions]

The mobile location-detail experience is materially changed without coverage or documented confirmation.

Blocking issues

• street-view.tsx removes the interactive mobile map, location marker, and map controls and replaces them with a static Street View image. This is a user-facing functional regression unless explicitly intended, and no tests verify the new responsive behavior or fallback when a Street View image is unavailable.

[shakilhossain1]

@adambard1 I just ran a Lighthouse test for this pr deploment.
The LCP issue is still there.

https://pagespeed.web.dev/analysis/https-yourpeer-codex-improve--qxwq1o-herokuapp-com-locations-churches-united-for-fair-housing-cuffh-east-williamsburg/klgc3jar3y?form_factor=mobile

[adambard1]

Thanks @shakilhossain1 I saw that there's a github action requested changes but it doesn't have any content, so I am unsure what to do.
the codex is here if you wanted to see it and progress it - you should be able to log in with 1password - use 'Streetlives second GPT' in the Streetlives Team vault.
Also, seeing the image in the lighthouse @shakilhossain1 - was it run for mobile. the fix is only for that.

[shakilhossain1]

I ran it on mobile @adambard1 .

And 'The GitHub action- 1 requested changes' means Codex hasn't approved this pr, and the content is in the latest Codex comment.
The mobile location-detail experience is materially changed without coverage or documented confirmation.

Blocking issues

• street-view.tsx removes the interactive mobile map, location marker, and map controls and replaces them with a static Street View image. This is a user-facing functional regression unless explicitly intended, and no tests verify the new responsive behavior or fallback when a Street View image is unavailable.

[adambard1]

ok, thanks again @shakilhossain1 perhaps you can show me how to solve this issue using codex (if it can solve it) on Monday?

[adambard1]

leaving this for you @shakilhossain1 to pick up.
The console page for the issue is here https://search.google.com/search-console/core-web-vitals/summary?resource_id=https%3A%2F%2Fyourpeer.nyc%2F&device=2