fix: wait for map load #1077

emilyjablonski · 2025-01-31T01:21:55Z

This PR addresses #1078

Addresses the issue in full
Addresses only certain aspects of the issue

Description

It is challenging to reproduce, but on a throttled connection, the listing list will sometimes flash an empty state before the full list has had a chance to actually do its first load.

How Can This Be Tested/Reviewed?

On both desktop and mobile, throttle your connection in the network tab. Load the page, pan the map, and add/remove filters. Ensure the listing list does not flash an empty state.

Author Checklist:

Added QA notes to the issue with applicable URLs
Reviewed in a desktop view
Reviewed in a mobile view
Reviewed considering accessibility
Added tests covering the changes
Made corresponding changes to the documentation
Ran yarn generate:client and/or created a migration when required

Review Process:

Read and understand the issue
Ensure the author has added QA notes
Review the code itself from a style point of view
Pull the changes down locally and test that the acceptance criteria is met
Either (1) explicitly ask a clarifying question, (2) request changes, or (3) approve the PR, even if there are very small remaining changes, if you don't need to re-review after the updates

emilyjablonski · 2025-01-31T01:22:54Z

sites/public/src/components/listings/search/ListingsSearchCombined.tsx

@@ -106,6 +117,8 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) {
    // Don't search the listings if the filter is changing - first search the markers, which will update the listings
    if (
      (!isFirstBoundsLoad &&
+        !!map &&


note: Only search for listings if the map has loaded (involves both new checks here) - this I cannot reproduce, but is just a suspicion on what may be happening

emilyjablonski · 2025-01-31T01:23:41Z

sites/public/src/components/listings/search/ListingsSearchCombined.tsx

@@ -144,7 +157,9 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) {
    })

    // On desktop, keep list loading set to true until map is finished with its first load
-    if (!isFirstBoundsLoad || !isDesktop) setIsLoading(false)
+    if ((!isFirstBoundsLoad && newMarkersSearch !== undefined) || !isDesktop) {


note: Only set the first page load loading state to false if the markers have been fetched for the first time, should prevent the flash

emilyjablonski · 2025-01-31T01:58:01Z

sites/public/src/components/listings/search/ListingsSearchCombined.tsx

@@ -144,7 +157,9 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) {
    })

    // On desktop, keep list loading set to true until map is finished with its first load
-    if (!isFirstBoundsLoad || !isDesktop) setIsLoading(false)
+    if ((!isFirstBoundsLoad && newMarkersSearch !== undefined && !changingFilter) || !isDesktop) {


note: Keep the loading state through fully changing the filter

emilyjablonski · 2025-01-31T01:58:26Z

sites/public/src/components/listings/search/ListingsSearchCombined.tsx

@@ -233,6 +248,7 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) {
  }, [isFirstBoundsLoad])

  const onFormSubmit = (params: ListingSearchParams) => {
+    setIsLoading(true)


note: Initiate loading state earlier when the filter is changed

emilyjablonski · 2025-01-31T01:58:57Z

sites/public/src/components/shared/MapRecenter.tsx

@@ -38,6 +38,7 @@ const MapRecenter = (props: MapRecenterProps) => {
          )
        }}
        size={"sm"}
+        variant={"primary-outlined"}


note: Change the recenter button to primary outline so that it doesn't blend in with the larger clusters

emilyjablonski · 2025-01-31T01:59:22Z

sites/public/src/pages/listings.tsx

-          bathrooms={props.bathrooms}
-          counties={locations}
-        />
+        <APIProvider apiKey={props.googleMapsApiKey}>


note: Move API provider up so that the map check is accessible when calling the listings API

emilyjablonski · 2025-01-31T02:00:25Z

sites/public/src/components/listings/ListingsCombined.module.scss

@@ -111,6 +111,7 @@

  [class*="loading-overlay__spinner"] {
    top: var(--seeds-s20);
+    color: var(--seeds-color-primary);


note: Change spinner color to primary - it was invisible on very first page load for a second on a slow connection before the rest of the list loaded

emilyjablonski · 2025-01-31T02:01:12Z

sites/public/src/components/listings/MapClusterer.tsx

@@ -50,6 +51,9 @@ export const fitBounds = (
      map.setZoom(zoomLevel - 7)
    }
  }
+  if (setIsFirstBoundsLoad) {


note: Move setting the bounds load to false into the set bounds function itself

emilyjablonski · 2025-01-31T02:01:37Z

sites/public/src/components/listings/MapClusterer.tsx

@@ -203,11 +207,7 @@ export const MapClusterer = ({
    // Only automatically size the map to fit all pins on first map load
    if (isFirstBoundsLoad === false) return

-    fitBounds(map, mapMarkers)
-
-    setTimeout(() => {


note: Seems like this really shouldn't have been here, I think it was intended to be a setTimeout(0) - this was moved into the set bounds fxn

emilyjablonski · 2025-01-31T02:16:49Z

sites/public/src/components/listings/ListingsCombined.tsx

@@ -48,114 +47,110 @@ const ListingsCombined = (props: ListingsCombinedProps) => {

  const getListingsList = () => {
    return (
-      <APIProvider apiKey={props.googleMapsApiKey}>


note: Just moved this up a level

emilyjablonski commented Jan 31, 2025

View reviewed changes

fix: wait for map load

dfac280

emilyjablonski force-pushed the wait-for-map-load branch from f41d1c6 to dfac280 Compare January 31, 2025 01:54

emilyjablonski commented Jan 31, 2025

View reviewed changes

refactor: remove tests

df62a2e

emilyjablonski commented Jan 31, 2025

View reviewed changes

refactor: recenter

280dac6

emilyjablonski commented Jan 31, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: wait for map load #1077

fix: wait for map load #1077

emilyjablonski commented Jan 31, 2025 •

edited

Loading

emilyjablonski Jan 31, 2025 •

edited

Loading

emilyjablonski Jan 31, 2025 •

edited

Loading

emilyjablonski Jan 31, 2025

emilyjablonski Jan 31, 2025

emilyjablonski Jan 31, 2025

emilyjablonski Jan 31, 2025

emilyjablonski Jan 31, 2025 •

edited

Loading

emilyjablonski Jan 31, 2025

emilyjablonski Jan 31, 2025 •

edited

Loading

emilyjablonski Jan 31, 2025

fix: wait for map load #1077

Are you sure you want to change the base?

fix: wait for map load #1077

Conversation

emilyjablonski commented Jan 31, 2025 • edited Loading

Description

How Can This Be Tested/Reviewed?

Author Checklist:

Review Process:

emilyjablonski Jan 31, 2025 • edited Loading

Choose a reason for hiding this comment

emilyjablonski Jan 31, 2025 • edited Loading

Choose a reason for hiding this comment

emilyjablonski Jan 31, 2025

Choose a reason for hiding this comment

emilyjablonski Jan 31, 2025

Choose a reason for hiding this comment

emilyjablonski Jan 31, 2025

Choose a reason for hiding this comment

emilyjablonski Jan 31, 2025

Choose a reason for hiding this comment

emilyjablonski Jan 31, 2025 • edited Loading

Choose a reason for hiding this comment

emilyjablonski Jan 31, 2025

Choose a reason for hiding this comment

emilyjablonski Jan 31, 2025 • edited Loading

Choose a reason for hiding this comment

emilyjablonski Jan 31, 2025

Choose a reason for hiding this comment

emilyjablonski commented Jan 31, 2025 •

edited

Loading

emilyjablonski Jan 31, 2025 •

edited

Loading

emilyjablonski Jan 31, 2025 •

edited

Loading

emilyjablonski Jan 31, 2025 •

edited

Loading

emilyjablonski Jan 31, 2025 •

edited

Loading