Merge pull request #410 from MapsPeople/feature/anlu/MIMTW-529-make-s…

…earch-results-list-perform-better-when-searc

Limit the number of search results displayed in the Search box

packages/map-template/CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.60.0] - 2024-11-28
+
+- Added `MAX_RESULTS` constant to limit the maximum number of search results displayed at once 
+
 ## [1.59.0] - 2024-11-26
 
 ### Added

packages/map-template/src/components/Search/Search.jsx

@@ -57,6 +57,9 @@ function Search({ onSetSize, isOpen }) {
     /** Referencing the keyboard element */
     const keyboardRef = useRef();
 
+    /** Maximum number of search results to show */
+    const MAX_RESULTS = 100;
+
     const [searchDisabled, setSearchDisabled] = useState(true);
     const [searchResults, setSearchResults] = useRecoilState(searchResultsState);
     const categories = useRecoilValue(categoriesState);
@@ -137,9 +140,11 @@ function Search({ onSetSize, isOpen }) {
      * @param {array} locations
      */
     function onResults(locations) {
-        setSearchResults(locations);
-        setFilteredLocations(locations);
-        setShowNotFoundMessage(locations.length === 0);
+        const displayResults = locations.slice(0, MAX_RESULTS);
+
+        setSearchResults(displayResults);
+        setFilteredLocations(displayResults);
+        setShowNotFoundMessage(displayResults.length === 0);
 
         // Handles updates to scroll buttons when the category changes.
         // When a category changes, the scroll buttons need to have their enabled/disabled states updated.