DOP-3791

src/components/SearchResults/SearchResults.js

@@ -299,10 +299,16 @@ const SearchResults = () => {
     setSearchFilter(searchProperty);
   }, [search, firstRenderComplete]);
 
+  // add loading skeleton when new filter selected and loading results
+  useEffect(() => {
+    newSearchInput && setSearchFinished(false);
+  }, [searchFilter]);
+
   // Update results on a new search query or filters
   // When the filter is changed, find the corresponding property to display
   useEffect(() => {
     if (!searchTerm || !Object.keys(searchPropertyMapping).length) {
+      if (!searchTerm && firstRenderComplete) setSearchFinished(true);
       return;
     }
     const fetchNewSearchResults = async () => {
@@ -314,7 +320,7 @@ const SearchResults = () => {
       setSearchFinished(true);
     };
     fetchNewSearchResults();
-  }, [searchFilter, searchPropertyMapping, searchTerm]);
+  }, [searchFilter, searchPropertyMapping, searchTerm, firstRenderComplete]);
 
   return (
     <>
@@ -375,6 +381,11 @@ const SearchResults = () => {
                   </FilterBadgesWrapper>
                 )}
               </ResultTag>
+              <MobileSearchButtonWrapper>
+                <Button leftGlyph={<Icon glyph={mobileFilterButton.glyph} />} onClick={mobileFilterButton.onClick}>
+                  {mobileFilterButton.text}
+                </Button>
+              </MobileSearchButtonWrapper>
             </HeaderContainer>
 
             {/* loading state for new search input */}
@@ -448,6 +459,7 @@ const SearchResults = () => {
                 </FiltersContainer>
               </>
             )}
+            {showMobileFilters && isTabletOrMobile && <MobileFilters />}
           </SearchResultsContainer>
         )}
 
@@ -482,7 +494,7 @@ const SearchResults = () => {
                 </Button>
               </MobileSearchButtonWrapper>
             </HeaderContainer>
-            {searchResults?.length ? (
+            {searchResults?.length && searchFinished ? (
               <>
                 <StyledSearchResults>
                   {searchResults.map(({ title, preview, url, searchProperty }, index) => (