discover page vertical jumping fix

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

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>
+      <main
-        {fetchingFeaturedUris &&
+        className={
-          <BusyMessage message={__("Fetching content")} />}
+          hasContent && fetchingFeaturedUris ? "main--refreshing" : null
-        {typeof featuredUris === "object" &&
+        }
+      >
+        {!hasContent &&
+          fetchingFeaturedUris &&
+          <BusyMessage message={__("Fetching content")} style={busyStyle} />}
+        {hasContent &&
           Object.keys(featuredUris).map(
             category =>
               featuredUris[category].length

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? */