fix: page load

Author: emilyjablonski

shared-helpers/src/locales/general.json

@@ -45,7 +45,10 @@
   "account.noClosedApplicationsSimplified": "None of the listings you've applied to have closed.",
   "account.noFavorites": "It looks like you haven't favorited any listings yet.",
   "account.noLotteryApplications": "None of the listings you've applied to have released lottery results.",
+  "t.noMatchingListings": "No matching listings",
   "t.noVisibleListings": "No visible listings",
+  "t.tryChangingArea": "Try adjusting your search area.",
+  "t.tryRemovingFilters": "Try removing some of your filters.",
   "search.filters": "Filters",
   "search.totalResults": "Total results",
   "t.recenterMap": "Recenter",

sites/public/src/components/browse/map/ListingsCombined.module.scss

@@ -105,13 +105,12 @@
      CSS module renaming and use these exact class names */
   [class*="loading-overlay"] {
     padding: 0;
-    min-height: var(--seeds-s40);
-    margin-bottom: var(--seeds-s4);
+    min-height: var(--seeds-s32);
     z-index: 1;
   }
 
   [class*="loading-overlay__spinner"] {
-    top: var(--seeds-s20);
+    top: var(--seeds-s16);
     color: var(--seeds-color-primary);
   }
 }
@@ -138,6 +137,10 @@
 
 .listings-list-container {
   border-bottom: 1px solid var(--seeds-color-gray-450);
-  margin-bottom: var(--seeds-s4);
   padding: var(--seeds-s4);
 }
+
+.listings-list-container-empty {
+  border-bottom: 0;
+  min-height: var(--seeds-s32);
+}

sites/public/src/components/browse/map/ListingsList.tsx

@@ -1,11 +1,6 @@
 import * as React from "react"
-import {
-  Jurisdiction,
-  Listing,
-  ListingMapMarker,
-} from "@bloom-housing/shared-helpers/src/types/backend-swagger"
+import { Listing, ListingMapMarker } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
 import { Button, Heading } from "@bloom-housing/ui-seeds"
-// import { ZeroListingsItem } from "@bloom-housing/doorway-ui-components"
 import { LoadingOverlay, t, InfoCard } from "@bloom-housing/ui-components"
 import { getMapListings } from "../../../lib/helpers"
 import { Pagination } from "./Pagination"
@@ -28,21 +23,36 @@ const ListingsList = (props: ListingsListProps) => {
       <Heading className={"sr-only"} priority={2}>
         {t("t.listingsList")}
       </Heading>
-      {props.listings.length > 0 || props.loading ? (
-        <div className={styles["listings-list-container"]}>{getMapListings(props.listings)}</div>
-      ) : (
-        // Map TODO: Create zero listings component
-        // <ZeroListingsItem
-        //   title={moreMarkersOnMap ? t("t.noVisibleListings") : t("t.noMatchingListings")}
-        //   description={moreMarkersOnMap ? t("t.tryChangingArea") : t("t.tryRemovingFilters")}
-        // />
-        <>{moreMarkersOnMap ? t("t.noVisibleListings") : t("t.noMatchingListings")}</>
-      )}
+      <div
+        className={`${styles["listings-list-container"]} ${
+          props.listings.length === 0 && styles["listings-list-container-empty"]
+        }`}
+      >
+        {props.listings.length > 0 || props.loading ? (
+          getMapListings(props.listings)
+        ) : (
+          <>
+            {moreMarkersOnMap ? (
+              <>
+                <Heading priority={2} size={"xl"}>
+                  {t("t.noVisibleListings")}
+                </Heading>
+                <div>{t("t.tryChangingArea")}</div>
+              </>
+            ) : (
+              <>
+                <Heading priority={2} size={"xl"}>
+                  {t("t.noMatchingListings")}
+                </Heading>
+                <div>{t("t.tryRemovingFilters")}</div>
+              </>
+            )}
+          </>
+        )}
+      </div>
     </div>
   )
 
-  console.log(props.loading)
-
   const infoCards = (
     <div className={styles["info-cards-container"]}>
       {process.env.notificationsSignUpUrl && (

sites/public/src/components/browse/map/ListingsSearchCombined.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from "react"
+import React, { useState, useEffect, useContext, useRef } from "react"
 import { useMap } from "@vis.gl/react-google-maps"
 import { ListingList, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers"
 import { t } from "@bloom-housing/ui-components"
@@ -55,6 +55,7 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) {
   const [isDesktop, setIsDesktop] = useState(undefined)
   const [isLoading, setIsLoading] = useState(true)
   const [isFirstBoundsLoad, setIsFirstBoundsLoad] = useState<boolean>(true)
+  const hasCompletedInitialListingsCallRef = useRef(false)
 
   const [searchFilter] = useState(
     parseSearchString(props.searchString, {
@@ -104,6 +105,10 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) {
     )
 
     if (visibleMarkers?.length === 0 && !changingFilter) {
+      if (!hasCompletedInitialListingsCallRef.current) {
+        return
+      }
+
       setSearchResults({
         listings: [],
         markers: searchResults.markers,
@@ -153,6 +158,7 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) {
         props.jurisdictionIds,
         drawerFilters
       )
+      hasCompletedInitialListingsCallRef.current = true
       newListings = result.items
       newMeta = result.meta
     }
@@ -256,7 +262,6 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) {
 
   // Re-search when the map's visible markers are changed
   useEffect(() => {
-    console.log("visible markers changed use effect")
     async function searchListings() {
       await search(1)
     }
@@ -274,8 +279,9 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) {
       setCurrentMarkers(visibleMarkers)
       void searchListings()
     } else {
-      console.log("set loading, to false they are the same")
-      setIsLoading(false)
+      if (hasCompletedInitialListingsCallRef.current) {
+        setIsLoading(false)
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visibleMarkers])
@@ -302,7 +308,9 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) {
   }
 
   const onDrawerSubmit = (data: FilterData) => {
-    const backendFilters = encodeFilterDataToBackendFilters(data)
+    const backendFilters = encodeFilterDataToBackendFilters(data).filter(
+      (filter) => filter.name !== ""
+    )
     setFilterState(data)
     setDrawerFilters(backendFilters)
     setFilterCount(backendFilters.length)

sites/public/src/components/browse/map/MapClusterer.tsx

@@ -114,6 +114,7 @@ export const MapClusterer = ({
   const mapRef = useRef(map)
   const mapMarkersRef = useRef(mapMarkers)
   const visibleMarkersRef = useRef(visibleMarkers)
+  const hasSeenNonEmptyVisibleMarkersRef = useRef(false)
   const isFirstBoundsLoadRef = useRef(isFirstBoundsLoad)
   const isDesktopRef = useRef(isDesktop)
 
@@ -133,10 +134,26 @@ export const MapClusterer = ({
   // Compute markers currently inside map bounds using the latest map + markers refs
   const getVisibleMarkersInBounds = useCallback(() => {
     const currentMap = mapRef.current
-    if (!currentMap) return []
+    if (!currentMap) return visibleMarkersRef.current ?? []
 
     const bounds = currentMap.getBounds()
     const currentMapMarkers = mapMarkersRef.current
+
+    // On slower connections/renders, bounds can be temporarily undefined while markers already exist
+    // During initial load (or before we've ever set visible markers), treat all fetched
+    // markers as visible until bounds are ready to avoid showing "no results" state prematurely
+    if (!bounds) {
+      if (
+        (isFirstBoundsLoadRef.current || (visibleMarkersRef.current?.length ?? 0) === 0) &&
+        (currentMapMarkers?.length ?? 0) > 0
+      ) {
+        return currentMapMarkers
+      }
+      return visibleMarkersRef.current ?? []
+    }
+
+    if (!currentMapMarkers) return visibleMarkersRef.current ?? []
+
     return currentMapMarkers?.filter((marker) => bounds?.contains(marker.coordinate)) ?? []
   }, [])
 
@@ -151,16 +168,38 @@ export const MapClusterer = ({
 
   const resetVisibleMarkers = useCallback(() => {
     const newVisibleMarkers = getVisibleMarkersInBounds()
+    const currentMapMarkers = mapMarkersRef.current ?? []
+
+    if (newVisibleMarkers.length > 0) {
+      hasSeenNonEmptyVisibleMarkersRef.current = true
+    }
+
     // During first desktop cycle, avoid triggering marker-driven search
     if (isFirstBoundsLoadRef.current && isDesktopRef.current) return
 
+    // On slow first load, fitBounds can complete before map bounds fully settle
+    // If markers exist but the very first computed visible set is empty, skip this
+    // state to avoid false "no visible listings"
+    if (
+      isDesktopRef.current &&
+      !hasSeenNonEmptyVisibleMarkersRef.current &&
+      currentMapMarkers.length > 0 &&
+      newVisibleMarkers.length === 0
+    ) {
+      setIsLoading(false)
+      return
+    }
+
     // When the computed visible set is identical, do not retrigger loading
     const nextSignature = markerSetSignature(newVisibleMarkers)
     const currentSignature = markerSetSignature(visibleMarkersRef.current)
-    if (nextSignature === currentSignature) return
+    if (nextSignature === currentSignature) {
+      setIsLoading(false)
+      return
+    }
 
     setVisibleMarkers(newVisibleMarkers)
-  }, [getVisibleMarkersInBounds, markerSetSignature, setVisibleMarkers])
+  }, [getVisibleMarkersInBounds, markerSetSignature, setIsLoading, setVisibleMarkers])
 
   const debouncedResetVisibleMarkers = useMemo(
     () => debounce(resetVisibleMarkers, 800),
@@ -173,7 +212,6 @@ export const MapClusterer = ({
     // After pan/zoom settles, refresh visible markers
     // First load runs immediately, then later interactions are debounced
     const idleListener = map.addListener("idle", () => {
-      console.log("idle listener")
       if (isFirstBoundsLoad) {
         resetVisibleMarkers()
         return
@@ -224,6 +262,14 @@ export const MapClusterer = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mapMarkers, map])
 
+  // Once first fitBounds cycle completes, trigger one reset so desktop listings can
+  // search immediately without requiring an additional drag
+  useEffect(() => {
+    if (!map) return
+    if (isFirstBoundsLoad) return
+    resetVisibleMarkers()
+  }, [isFirstBoundsLoad, map, resetVisibleMarkers])
+
   const fetchInfoWindow = async (listingId: string) => {
     try {
       const response = await listingsService.retrieve({