Search hints/autocomplete UI (#2971)

* Implement UI for autocomplete feature
* Debounce autocompleteStart()
* Fix AMO_CDN env var in dev

package.json

@@ -52,7 +52,7 @@
     "amo:dev": {
       "command": "better-npm-run start-dev-proxy",
       "env": {
-        "AMO_CDN": "https://addons-amo-dev-cdn.allizom.org",
+        "AMO_CDN": "https://addons-dev-cdn.allizom.org",
         "PROXY_API_HOST": "https://addons-dev.allizom.org",
         "FXA_CONFIG": "local",
         "CSP": false,
@@ -181,6 +181,7 @@
     "raven-js": "3.17.0",
     "react": "15.6.1",
     "react-addons-css-transition-group": "15.6.0",
+    "react-autosuggest": "9.3.2",
     "react-cookie": "1.0.5",
     "react-dom": "15.6.1",
     "react-helmet": "5.1.3",

src/amo/components/SearchForm/Suggestion.js

@@ -0,0 +1,27 @@
+/* @flow */
+import React from 'react';
+
+import Icon from 'ui/components/Icon';
+import LoadingText from 'ui/components/LoadingText';
+
+
+type Props = {|
+  name: string,
+  iconUrl: string,
+  loading: boolean,
+  arrowAlt?: string,
+|};
+
+const Suggestion = ({ name, iconUrl, arrowAlt, loading }: Props) => {
+  return (
+    <p className="Suggestion">
+      <img alt={name} className="Suggestion-icon" src={iconUrl} />
+      <span className="Suggestion-name">
+        {loading ? <LoadingText minWidth={20} range={12} /> : name}
+      </span>
+      <Icon name="arrow-big-blue" alt={arrowAlt} />
+    </p>
+  );
+};
+
+export default Suggestion;