From 49a7f30f45fdf083bd6ac6bc37e64f4d85da330d Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 26 Aug 2020 17:16:45 -0400
Subject: [PATCH] fix loading state for tile layout

---
 ui/component/claimListDiscover/view.jsx |   8 ++
 ui/component/sideNavigation/view.jsx    | 155 +++++++++++-------------
 ui/scss/component/_claim-list.scss      |   1 +
 3 files changed, 80 insertions(+), 84 deletions(-)

diff --git a/ui/component/claimListDiscover/view.jsx b/ui/component/claimListDiscover/view.jsx
index 2c6a71868..464864c4a 100644
--- a/ui/component/claimListDiscover/view.jsx
+++ b/ui/component/claimListDiscover/view.jsx
@@ -9,6 +9,7 @@ import Button from 'component/button';
 import moment from 'moment';
 import ClaimList from 'component/claimList';
 import ClaimPreview from 'component/claimPreview';
+import ClaimPreviewTile from 'component/claimPreviewTile';
 import I18nMessage from 'component/i18nMessage';
 import ClaimListHeader from 'component/claimListHeader';
 
@@ -434,6 +435,13 @@ function ClaimListDiscover(props: Props) {
             hideBlock={hideBlock}
             injectedItem={injectedItem}
           />
+          {loading && (
+            <div className="claim-grid">
+              {new Array(pageSize || CS.PAGE_SIZE).fill(1).map((x, i) => (
+                <ClaimPreviewTile key={i} placeholder="loading" />
+              ))}
+            </div>
+          )}
         </div>
       ) : (
         <div>
diff --git a/ui/component/sideNavigation/view.jsx b/ui/component/sideNavigation/view.jsx
index e2d27f7c1..b20c01752 100644
--- a/ui/component/sideNavigation/view.jsx
+++ b/ui/component/sideNavigation/view.jsx
@@ -276,66 +276,11 @@ function SideNavigation(props: Props) {
             // @endif
           })}
         >
-          <ul className={classnames('navigation-links', { 'navigation-links--micro': !sidebarOpen })}>
-            {TOP_LEVEL_LINKS.map(linkProps => {
-              const { hideForUnauth, ...passedProps } = linkProps;
-              return !email && linkProps.hideForUnauth && IS_WEB ? null : (
-                <li key={linkProps.icon}>
-                  <Button
-                    {...passedProps}
-                    label={__(linkProps.label)}
-                    icon={pulseLibrary && linkProps.icon === ICONS.LIBRARY ? ICONS.PURCHASED : linkProps.icon}
-                    className={classnames('navigation-link', {
-                      'navigation-link--pulse': linkProps.icon === ICONS.LIBRARY && pulseLibrary,
-                      'navigation-link--highlighted': linkProps.icon === ICONS.NOTIFICATION && unreadCount > 0,
-                    })}
-                    activeClass="navigation-link--active"
-                  />
-                  {linkProps.extra}
-                </li>
-              );
-            })}
-          </ul>
-          {sidebarOpen && isPersonalized && subscriptions && subscriptions.length > 0 && (
-            <ul className="navigation__secondary navigation-links navigation-links--small">
-              {subscriptions.map(({ uri, channelName }, index) => (
-                <li key={uri} className="navigation-link__wrapper">
-                  <Button
-                    navigate={uri}
-                    label={channelName}
-                    className="navigation-link"
-                    activeClass="navigation-link--active"
-                  />
-                </li>
-              ))}
-            </ul>
-          )}
-          {sidebarOpen && isPersonalized && followedTags && followedTags.length > 0 && (
-            <ul className="navigation__secondary navigation-links navigation-links--small">
-              {followedTags.map(({ name }, key) => (
-                <li key={name} className="navigation-link__wrapper">
-                  <Button navigate={`/$/discover?t=${name}`} label={`#${name}`} className="navigation-link" />
-                </li>
-              ))}
-            </ul>
-          )}
-        </nav>
-      )}
-
-      {(isOnFilePage || isMediumScreen) && sidebarOpen && (
-        <>
-          <nav
-            className={classnames('navigation--absolute', {
-              // @if TARGET='app'
-              'navigation--mac': IS_MAC,
-              // @endif
-            })}
-          >
-            <ul className="navigation-links--absolute">
+          <div>
+            <ul className={classnames('navigation-links', { 'navigation-links--micro': !sidebarOpen })}>
               {TOP_LEVEL_LINKS.map(linkProps => {
                 const { hideForUnauth, ...passedProps } = linkProps;
-
-                return !email && hideForUnauth && IS_WEB ? null : (
+                return !email && linkProps.hideForUnauth && IS_WEB ? null : (
                   <li key={linkProps.icon}>
                     <Button
                       {...passedProps}
@@ -352,25 +297,9 @@ function SideNavigation(props: Props) {
                 );
               })}
             </ul>
-            <ul className="navigation-links--absolute">
-              {subLinks.map(linkProps => {
-                const { hideForUnauth, ...passedProps } = linkProps;
 
-                return !email && hideForUnauth && IS_WEB ? null : (
-                  <li key={linkProps.icon} className="mobile-only">
-                    <Button
-                      {...passedProps}
-                      label={__(linkProps.label)}
-                      className="navigation-link"
-                      activeClass="navigation-link--active"
-                    />
-                    {linkProps.extra}
-                  </li>
-                );
-              })}
-            </ul>
-            {isPersonalized && subscriptions && subscriptions.length > 0 && (
-              <ul className="navigation__secondary navigation-links--small">
+            {sidebarOpen && isPersonalized && subscriptions && subscriptions.length > 0 && (
+              <ul className="navigation__secondary navigation-links navigation-links--small">
                 {subscriptions.map(({ uri, channelName }, index) => (
                   <li key={uri} className="navigation-link__wrapper">
                     <Button
@@ -383,15 +312,73 @@ function SideNavigation(props: Props) {
                 ))}
               </ul>
             )}
-            {isPersonalized && followedTags && followedTags.length > 0 && (
-              <ul className="navigation__secondary navigation-links--small">
-                {followedTags.map(({ name }, key) => (
-                  <li key={name} className="navigation-link__wrapper">
-                    <Button navigate={`/$/discover?t=${name}`} label={`#${name}`} className="navigation-link" />
-                  </li>
-                ))}
+          </div>
+        </nav>
+      )}
+
+      {(isOnFilePage || isMediumScreen) && sidebarOpen && (
+        <>
+          <nav
+            className={classnames('navigation--absolute', {
+              // @if TARGET='app'
+              'navigation--mac': IS_MAC,
+              // @endif
+            })}
+          >
+            <div>
+              <ul className="navigation-links--absolute">
+                {TOP_LEVEL_LINKS.map(linkProps => {
+                  const { hideForUnauth, ...passedProps } = linkProps;
+
+                  return !email && hideForUnauth && IS_WEB ? null : (
+                    <li key={linkProps.icon}>
+                      <Button
+                        {...passedProps}
+                        label={__(linkProps.label)}
+                        icon={pulseLibrary && linkProps.icon === ICONS.LIBRARY ? ICONS.PURCHASED : linkProps.icon}
+                        className={classnames('navigation-link', {
+                          'navigation-link--pulse': linkProps.icon === ICONS.LIBRARY && pulseLibrary,
+                          'navigation-link--highlighted': linkProps.icon === ICONS.NOTIFICATION && unreadCount > 0,
+                        })}
+                        activeClass="navigation-link--active"
+                      />
+                      {linkProps.extra}
+                    </li>
+                  );
+                })}
               </ul>
-            )}
+              <ul className="navigation-links--absolute">
+                {subLinks.map(linkProps => {
+                  const { hideForUnauth, ...passedProps } = linkProps;
+
+                  return !email && hideForUnauth && IS_WEB ? null : (
+                    <li key={linkProps.icon} className="mobile-only">
+                      <Button
+                        {...passedProps}
+                        label={__(linkProps.label)}
+                        className="navigation-link"
+                        activeClass="navigation-link--active"
+                      />
+                      {linkProps.extra}
+                    </li>
+                  );
+                })}
+              </ul>
+              {isPersonalized && subscriptions && subscriptions.length > 0 && (
+                <ul className="navigation__secondary navigation-links--small">
+                  {subscriptions.map(({ uri, channelName }, index) => (
+                    <li key={uri} className="navigation-link__wrapper">
+                      <Button
+                        navigate={uri}
+                        label={channelName}
+                        className="navigation-link"
+                        activeClass="navigation-link--active"
+                      />
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
           </nav>
           <div
             className={classnames('navigation__overlay', {
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index 982cca732..4001d58d3 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -328,6 +328,7 @@
   margin-top: 0;
   margin-left: var(--spacing-m);
   justify-content: flex-start;
+  list-style: none;
 
   .media__thumb {
     border-bottom-right-radius: 0;