From 6b8a38b894290c737cc1186a45ba652fbc275b9b Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 16 Sep 2020 16:12:47 -0400
Subject: [PATCH] add spinner to web upload message and fix double card issue

---
 ui/component/publishPending/view.jsx |  7 +++-
 ui/page/channels/view.jsx            | 25 ++++++-------
 ui/page/fileListPublished/view.jsx   | 56 ++++++++++++++--------------
 ui/scss/component/_claim-list.scss   |  2 +-
 4 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/ui/component/publishPending/view.jsx b/ui/component/publishPending/view.jsx
index bd0b4029c..2db1a1c85 100644
--- a/ui/component/publishPending/view.jsx
+++ b/ui/component/publishPending/view.jsx
@@ -3,6 +3,7 @@
 import React from 'react';
 import Lbry from 'lbry-redux';
 import Button from 'component/button';
+import Spinner from 'component/spinner';
 
 type Props = {
   reflectingInfo?: ReflectingUpdate,
@@ -25,7 +26,11 @@ const PublishPending = (props: Props) => {
   } else if (reflecting) {
     return <span>{__('Uploading (%progress%%) ', { progress: progress })}</span>;
   } else {
-    return <span>{__('Confirming')}</span>;
+    return (
+      <span>
+        {__('Confirming...')} <Spinner type="small" />
+      </span>
+    );
   }
 };
 
diff --git a/ui/page/channels/view.jsx b/ui/page/channels/view.jsx
index 5f0a60d96..1ed8566d4 100644
--- a/ui/page/channels/view.jsx
+++ b/ui/page/channels/view.jsx
@@ -6,7 +6,6 @@ import Page from 'component/page';
 import Button from 'component/button';
 import YoutubeTransferStatus from 'component/youtubeTransferStatus';
 import Spinner from 'component/spinner';
-import Card from 'component/common/card';
 import Yrbl from 'component/yrbl';
 import * as PAGES from 'constants/pages';
 
@@ -33,20 +32,18 @@ export default function ChannelsPage(props: Props) {
         {hasYoutubeChannels && <YoutubeTransferStatus hideChannelLink />}
 
         {channelUrls && Boolean(channelUrls.length) && (
-          <Card
-            title={__('Your channels')}
-            titleActions={
-              <>
-                <Button
-                  button="secondary"
-                  icon={ICONS.CHANNEL}
-                  label={__('New Channel')}
-                  navigate={`/$/${PAGES.CHANNEL_NEW}`}
-                />
-              </>
+          <ClaimList
+            header={<h1 className="section__title">{__('Your channels')}</h1>}
+            headerAltControls={
+              <Button
+                button="secondary"
+                icon={ICONS.CHANNEL}
+                label={__('New Channel')}
+                navigate={`/$/${PAGES.CHANNEL_NEW}`}
+              />
             }
-            isBodyList
-            body={<ClaimList loading={fetchingChannels} uris={channelUrls} />}
+            loading={fetchingChannels}
+            uris={channelUrls}
           />
         )}
       </div>
diff --git a/ui/page/fileListPublished/view.jsx b/ui/page/fileListPublished/view.jsx
index a71416e7d..ca7b802c6 100644
--- a/ui/page/fileListPublished/view.jsx
+++ b/ui/page/fileListPublished/view.jsx
@@ -9,7 +9,6 @@ import Paginate from 'component/common/paginate';
 import { PAGE_PARAM, PAGE_SIZE_PARAM } from 'constants/claim';
 import WebUploadList from 'component/webUploadList';
 import Spinner from 'component/spinner';
-import Card from 'component/common/card';
 import Yrbl from 'component/yrbl';
 
 type Props = {
@@ -61,36 +60,35 @@ function FileListPublished(props: Props) {
       <div className="card-stack">
         <WebUploadList />
         {!!(urls && urls.length) && (
-          <Card
-            title={__('Uploads')}
-            titleActions={
-              <div className="card__actions--inline">
-                {fetching && <Spinner type="small" />}
-                {!fetching && (
+          <>
+            <ClaimList
+              header={<h1 className="section__title">{__('Uploads')}</h1>}
+              headerAltControls={
+                <div className="card__actions--inline">
+                  {fetching && <Spinner type="small" />}
+                  {!fetching && (
+                    <Button
+                      button="alt"
+                      label={__('Refresh')}
+                      icon={ICONS.REFRESH}
+                      onClick={() => fetchClaimListMine(params.page, params.page_size)}
+                    />
+                  )}
                   <Button
-                    button="alt"
-                    label={__('Refresh')}
-                    icon={ICONS.REFRESH}
-                    onClick={() => fetchClaimListMine(params.page, params.page_size)}
+                    icon={ICONS.PUBLISH}
+                    button="secondary"
+                    label={__('Upload')}
+                    navigate={`/$/${PAGES.UPLOAD}`}
+                    onClick={() => clearPublish()}
                   />
-                )}
-                <Button
-                  icon={ICONS.PUBLISH}
-                  button="secondary"
-                  label={__('Upload')}
-                  navigate={`/$/${PAGES.UPLOAD}`}
-                  onClick={() => clearPublish()}
-                />
-              </div>
-            }
-            isBodyList
-            body={
-              <div>
-                <ClaimList loading={fetching} persistedStorageKey="claim-list-published" uris={urls} />
-                <Paginate totalPages={urlTotal > 0 ? Math.ceil(urlTotal / Number(pageSize)) : 1} />
-              </div>
-            }
-          />
+                </div>
+              }
+              loading={fetching}
+              persistedStorageKey="claim-list-published"
+              uris={urls}
+            />
+            <Paginate totalPages={urlTotal > 0 ? Math.ceil(urlTotal / Number(pageSize)) : 1} />
+          </>
         )}
       </div>
       {!(urls && urls.length) && (
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index a8155d79c..16115e1be 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -51,7 +51,7 @@
   display: flex;
   align-items: center;
   margin-left: auto;
-  padding-top: var(--spacing-m);
+  //   padding-top: var(--spacing-m);
 
   & > * {
     margin-left: var(--spacing-s);