From 52f3fab3a6d4139ede218e677c66fb45a6f8ff93 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 28 Aug 2018 11:35:24 -0400
Subject: [PATCH] add spinner to related content

---
 src/renderer/component/recommendedContent/view.jsx |  2 ++
 src/renderer/component/spinner/view.jsx            |  1 +
 src/renderer/scss/component/_spinner.scss          | 14 ++++++++++++++
 yarn.lock                                          |  4 ++--
 4 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/renderer/component/recommendedContent/view.jsx b/src/renderer/component/recommendedContent/view.jsx
index 4a12aecb3..902229c47 100644
--- a/src/renderer/component/recommendedContent/view.jsx
+++ b/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>
     );
   }
diff --git a/src/renderer/component/spinner/view.jsx b/src/renderer/component/spinner/view.jsx
index 836971041..4d5030b83 100644
--- a/src/renderer/component/spinner/view.jsx
+++ b/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" />
diff --git a/src/renderer/scss/component/_spinner.scss b/src/renderer/scss/component/_spinner.scss
index d6e4cb937..5ef690181 100644
--- a/src/renderer/scss/component/_spinner.scss
+++ b/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%,
diff --git a/yarn.lock b/yarn.lock
index 3b366088b..db1f53c7d 100644
--- a/yarn.lock
+++ b/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"