SearchBar style fix to avoid css override in calling app.

Author: vikasrohit

components/SearchBar/SearchBar.jsx

@@ -139,7 +139,7 @@ class SearchBar extends Component {
     })
 
     const results = this.state.loading === true
-      ? <div className="loading"><Loader /></div>
+      ? <div className="loading-suggestions"><Loader /></div>
       : <SearchSuggestions recentSearch={ recentList } popularSearch={ popularList } onSuggestionSelect={ this.handleSuggestionSelect } />
     return (
       <div className={ sbClasses }>

components/SearchBar/SearchBar.scss

@@ -145,16 +145,14 @@ $active-icon-wrap-bg: #888894;
     left: 0;
     width: 100%;
     z-index: 1000;
-  }
-
-  .loading {
-    background: none;
-  }
 
-  .SearchSuggestions {
+    .loading-suggestions {
+    }
 
-    strong {
-      font-weight: 600;
+    .SearchSuggestions {
+      strong {
+        font-weight: 600;
+      }
     }
   }
 }

components/SearchSuggestions/SearchSuggestions.jsx

@@ -63,7 +63,7 @@ class SearchSuggestions extends Component {
 							{	recentList.map(suggestionItem) }
 						</ul>
 							{
-								popularList ? '' :  (
+								popularList.length !== 0 ? '' :  (
 									<a href="javascript:;" className="footer-link transition">
 										Learn more about the new Search here
 									</a>
@@ -105,13 +105,13 @@ class SearchSuggestions extends Component {
 SearchSuggestions.propTypes = {
   onSuggestionSelect    : PropTypes.func.isRequired,
   recentSearch          : PropTypes.array,
-  popularList           : PropTypes.array,
+  popularSearch           : PropTypes.array,
   searchTerm            : PropTypes.string
 }
 
 SearchSuggestions.defaultProps = {
   recentSearch          : [],
-  popularList           : [],
+  popularSearch           : [],
   searchTerm            : ''
 }