add spinner to web upload message and fix double card issue

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>
+    );
   }
 };
 

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
+          <ClaimList
-            title={__('Your channels')}
+            header={<h1 className="section__title">{__('Your channels')}</h1>}
-            titleActions={
+            headerAltControls={
-              <>
               <Button
                 button="secondary"
                 icon={ICONS.CHANNEL}
                 label={__('New Channel')}
                 navigate={`/$/${PAGES.CHANNEL_NEW}`}
               />
-              </>
             }
-            isBodyList
+            loading={fetchingChannels}
-            body={<ClaimList loading={fetchingChannels} uris={channelUrls} />}
+            uris={channelUrls}
           />
         )}
       </div>

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,9 +60,10 @@ function FileListPublished(props: Props) {
       <div className="card-stack">
         <WebUploadList />
         {!!(urls && urls.length) && (
-          <Card
+          <>
-            title={__('Uploads')}
+            <ClaimList
-            titleActions={
+              header={<h1 className="section__title">{__('Uploads')}</h1>}
+              headerAltControls={
                 <div className="card__actions--inline">
                   {fetching && <Spinner type="small" />}
                   {!fetching && (
@@ -83,14 +83,12 @@ function FileListPublished(props: Props) {
                   />
                 </div>
               }
-            isBodyList
+              loading={fetching}
-            body={
+              persistedStorageKey="claim-list-published"
-              <div>
+              uris={urls}
-                <ClaimList loading={fetching} persistedStorageKey="claim-list-published" uris={urls} />
-                <Paginate totalPages={urlTotal > 0 ? Math.ceil(urlTotal / Number(pageSize)) : 1} />
-              </div>
-            }
             />
+            <Paginate totalPages={urlTotal > 0 ? Math.ceil(urlTotal / Number(pageSize)) : 1} />
+          </>
         )}
       </div>
       {!(urls && urls.length) && (

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);