add spinner to related content

src/renderer/component/recommendedContent/view.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import FileTile from 'component/fileTile';
 import type { Claim } from 'types/claim';
+import Spinner from 'component/spinner';
 
 type Props = {
   uri: string,
@@ -65,6 +66,7 @@ export default class RecommendedContent extends React.PureComponent<Props> {
         {recommendedContent &&
           !recommendedContent.length &&
           !isSearching && <div className="card__subtitle">No related content found</div>}
+        {isSearching && <Spinner type="small" />}
       </section>
     );
   }

src/renderer/component/spinner/view.jsx

@@ -19,6 +19,7 @@ const Spinner = (props: Props) => {
         'spinner--dark': !light && (dark || theme === LIGHT_THEME),
         'spinner--light': !dark && (light || theme === DARK_THEME),
         'spinner--splash': type === 'splash',
+        'spinner--small': type === 'small',
       })}
     >
       <div className="rect rect1" />

src/renderer/scss/component/_spinner.scss

@@ -50,6 +50,20 @@
   }
 }
 
+.spinner--small {
+  margin: $spacing-vertical * 1/3 0;
+  width: 40px;
+  height: 32px;
+  text-align: center;
+  font-size: 10px;
+
+  .rect {
+    height: 100%;
+    width: 3px;
+    margin: 0 2px;
+  }
+}
+
 @keyframes sk-stretchdelay {
   0%,
   40%,

yarn.lock

@@ -5655,9 +5655,9 @@ lazy-val@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/lazy-val/-/lazy-val-1.0.3.tgz#bb97b200ef00801d94c317e29dc6ed39e31c5edc"
 
-lbry-redux@lbryio/lbry-redux#ccda4117ee503e30abae355c77d3783a141e9492:
+lbry-redux@lbryio/lbry-redux#eae0d134d92d83f733b85a8ecebf529a6e9799cf:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/ccda4117ee503e30abae355c77d3783a141e9492"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/eae0d134d92d83f733b85a8ecebf529a6e9799cf"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"