From a7195d12e1d2f217a49143971bde1fc29c771cd0 Mon Sep 17 00:00:00 2001
From: Jeremy Kauffman <kauffj@gmail.com>
Date: Sat, 15 Jul 2017 15:15:17 -0400
Subject: [PATCH] discover page vertical jumping fix

---
 CHANGELOG.md                 |  1 +
 ui/js/page/discover/view.jsx | 17 ++++++++++++-----
 ui/scss/_gui.scss            | 13 +++++++++++++
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b08dd887..9a6a82780 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
   * Fixed unconfirmed published files missing channel name
   * Fixed old files from updated published claims appearing in downloaded list
   * Fixed inappropriate text showing on searches
+  * Stop discover page from pushing jumping vertically while loading
   * Restored feedback on claim amounts
 
 ### Deprecated
diff --git a/ui/js/page/discover/view.jsx b/ui/js/page/discover/view.jsx
index d6c506dfd..c347a971f 100644
--- a/ui/js/page/discover/view.jsx
+++ b/ui/js/page/discover/view.jsx
@@ -48,13 +48,20 @@ class DiscoverPage extends React.PureComponent {
     const failedToLoad =
       !fetchingFeaturedUris &&
       (featuredUris === undefined ||
-        (featuredUris !== undefined && Object.keys(featuredUris).length === 0));
+        (featuredUris !== undefined && Object.keys(featuredUris).length === 0)),
+      hasContent =
+        typeof featuredUris === "object" && Object.keys(featuredUris).length;
 
     return (
-      <main>
-        {fetchingFeaturedUris &&
-          <BusyMessage message={__("Fetching content")} />}
-        {typeof featuredUris === "object" &&
+      <main
+        className={
+          hasContent && fetchingFeaturedUris ? "main--refreshing" : null
+        }
+      >
+        {!hasContent &&
+          fetchingFeaturedUris &&
+          <BusyMessage message={__("Fetching content")} style={busyStyle} />}
+        {hasContent &&
           Object.keys(featuredUris).map(
             category =>
               featuredUris[category].length
diff --git a/ui/scss/_gui.scss b/ui/scss/_gui.scss
index a902fe2da..057027771 100644
--- a/ui/scss/_gui.scss
+++ b/ui/scss/_gui.scss
@@ -47,6 +47,19 @@ body
     width: $width-page-constrained;
   }
 }
+main.main--refreshing {
+  &:before {
+    $width: 30px;
+    position: absolute;
+    background: url('../img/busy.gif') no-repeat center center;
+    width: $width;
+    height: $spacing-vertical;
+    content: "";
+    left: 50%;
+    margin-left: -1 / 2 * $width;
+    display: inline-block;
+  }
+}
 
 .icon-fixed-width {
   /* This borrowed is from a component of Font Awesome we're not using, maybe add it? */