From 79f05a831fe52f1f4911c2404b4a8247225860d0 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 4 Apr 2022 20:05:46 +0800
Subject: [PATCH] Uploads: show placeholder when loading

---
 CHANGELOG.md                       | 9 ++++++++-
 ui/page/fileListPublished/view.jsx | 7 +++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f5073bbd5..6f57ede3f 100644
--- a/CHANGELOG.md
+++ b/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))
 
diff --git a/ui/page/fileListPublished/view.jsx b/ui/page/fileListPublished/view.jsx
index 9e1a43ceb..d87be48e0 100644
--- a/ui/page/fileListPublished/view.jsx
+++ b/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} />
           </>
         )}