Uploads: show placeholder when loading

CHANGELOG.md

@@ -5,6 +5,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased for Desktop]
 
+### Added
+- Uploads: show placeholder when loading page _community pr!_ ([#7531](https://github.com/lbryio/lbry-desktop/pull/7531))
+
+### Changed
+
+### Fixed
+
 ## [0.52.6] - [2022-04-04]
 
 ### Added
@@ -54,7 +61,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Reenabled generating thumbs from video ([#7384](https://github.com/lbryio/lbry-desktop/pull/7409))
 - Brought in playlist drag and drop playlist reordering _odysee team!_ ([#7442](https://github.com/lbryio/lbry-desktop/pull/7442))
 - Added duration overlays to ClaimPreview component ([#7420](https://github.com/lbryio/lbry-desktop/pull/7420))
-- Some Horizontal Scroll groundwork from _odysee team!_ 
+- Some Horizontal Scroll groundwork from _odysee team!_
 - Comment Emotes and Stickers and Mentions refactors from _odysee team!_ ([#7435](https://github.com/lbryio/lbry-desktop/pull/7435))
 - Seek forward and back from _odysee team!_ () ([#7460](https://github.com/lbryio/lbry-desktop/pull/7460))
 

ui/page/fileListPublished/view.jsx

@@ -4,6 +4,7 @@ import * as ICONS from 'constants/icons';
 import React, { useEffect } from 'react';
 import Button from 'component/button';
 import ClaimList from 'component/claimList';
+import ClaimPreview from 'component/claimPreview';
 import Page from 'component/page';
 import Paginate from 'component/common/paginate';
 import { PAGE_PARAM, PAGE_SIZE_PARAM } from 'constants/claim';
@@ -87,7 +88,6 @@ function FileListPublished(props: Props) {
               }
               headerAltControls={
                 <div className="card__actions--inline">
-                  {fetching && <Spinner type="small" />}
                   {!fetching && (
                     <Button
                       button="alt"
@@ -106,8 +106,11 @@ function FileListPublished(props: Props) {
                 </div>
               }
               persistedStorageKey="claim-list-published"
-              uris={urls}
+              uris={fetching ? [] : urls}
+              loading={fetching}
             />
+            {fetching &&
+              new Array(Number(pageSize)).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}
             <Paginate totalPages={urlTotal > 0 ? Math.ceil(urlTotal / Number(pageSize)) : 1} />
           </>
         )}