loading state for publish and channel list pages

This commit is contained in:
jessop 2019-11-15 15:48:57 -05:00 committed by Sean Yesmunt
parent 2832880d45
commit 41ff13b0d6
3 changed files with 55 additions and 22 deletions

View file

@ -894,5 +894,9 @@
"Start minimized": "Start minimized", "Start minimized": "Start minimized",
"Improve view speed and help the LBRY network by allowing the app to cuddle up in your system tray.": "Improve view speed and help the LBRY network by allowing the app to cuddle up in your system tray.", "Improve view speed and help the LBRY network by allowing the app to cuddle up in your system tray.": "Improve view speed and help the LBRY network by allowing the app to cuddle up in your system tray.",
"Content Type": "Content Type", "Content Type": "Content Type",
"Submit Feedback": "Submit Feedback" "Submit Feedback": "Submit Feedback",
"Checking your publishes...": "Checking your publishes...",
"Checking your publishes": "Checking your publishes",
"Checking for channels": "Checking for channels",
"files": "files"
} }

View file

@ -4,6 +4,7 @@ import ClaimList from 'component/claimList';
import Page from 'component/page'; import Page from 'component/page';
import Button from 'component/button'; import Button from 'component/button';
import YoutubeTransferStatus from 'component/youtubeTransferStatus'; import YoutubeTransferStatus from 'component/youtubeTransferStatus';
import Spinner from 'component/spinner';
type Props = { type Props = {
channels: Array<ChannelClaim>, channels: Array<ChannelClaim>,
@ -36,7 +37,7 @@ export default function ChannelsPage(props: Props) {
<Page> <Page>
{hasYoutubeChannels && <YoutubeTransferStatus hideChannelLink />} {hasYoutubeChannels && <YoutubeTransferStatus hideChannelLink />}
{channels && channels.length ? ( {channels && Boolean(channels.length) && (
<div className="card"> <div className="card">
<ClaimList <ClaimList
header={__('Your Channels')} header={__('Your Channels')}
@ -44,7 +45,10 @@ export default function ChannelsPage(props: Props) {
uris={channels.map(channel => channel.permanent_url)} uris={channels.map(channel => channel.permanent_url)}
/> />
</div> </div>
) : ( )}
{!(channels && channels.length) && (
<React.Fragment>
{!fetchingChannels ? (
<section className="main--empty"> <section className="main--empty">
<div className=" section--small"> <div className=" section--small">
<h2 className="section__title--large">{__('No Channels Created Yet')}</h2> <h2 className="section__title--large">{__('No Channels Created Yet')}</h2>
@ -54,6 +58,17 @@ export default function ChannelsPage(props: Props) {
</div> </div>
</div> </div>
</section> </section>
) : (
<section className="main--empty">
<div className=" section--small">
<h2 className="section__title--small">
{__('Checking for channels')}
<Spinner type="small" />
</h2>
</div>
</section>
)}
</React.Fragment>
)} )}
</Page> </Page>
); );

View file

@ -6,6 +6,7 @@ import Page from 'component/page';
import Paginate from 'component/common/paginate'; import Paginate from 'component/common/paginate';
import { PAGE_SIZE } from 'constants/claim'; import { PAGE_SIZE } from 'constants/claim';
import WebUploadList from 'component/webUploadList'; import WebUploadList from 'component/webUploadList';
import Spinner from 'component/spinner';
type Props = { type Props = {
checkPendingPublishes: () => void, checkPendingPublishes: () => void,
@ -27,7 +28,7 @@ function FileListPublished(props: Props) {
return ( return (
<Page notContained> <Page notContained>
<WebUploadList /> <WebUploadList />
{urls && urls.length ? ( {urls && Boolean(urls.length) && (
<div className="card"> <div className="card">
<ClaimList <ClaimList
header={__('Your Publishes')} header={__('Your Publishes')}
@ -38,16 +39,29 @@ function FileListPublished(props: Props) {
/> />
<Paginate totalPages={Math.ceil(Number(urlTotal) / Number(PAGE_SIZE))} loading={fetching} /> <Paginate totalPages={Math.ceil(Number(urlTotal) / Number(PAGE_SIZE))} loading={fetching} />
</div> </div>
) : ( )}
{!(urls && urls.length) && (
<React.Fragment>
{!fetching ? (
<section className="main--empty"> <section className="main--empty">
<div className=" section--small"> <div className=" section--small">
<h2 className="section__title--large">{__('Nothing published to LBRY yet.')}</h2> <h2 className="section__title--large">{__('Nothing published to LBRY yet.')}</h2>
<div className="section__actions"> <div className="section__actions">
<Button button="primary" navigate="/$/publish" label={__('Publish something new')} /> <Button button="primary" navigate="/$/publish" label={__('Publish something new')} />
</div> </div>
</div> </div>
</section> </section>
) : (
<section className="main--empty">
<div className=" section--small">
<h2 className="section__title--small">
{__('Checking your publishes')}
<Spinner type="small" />
</h2>
</div>
</section>
)}
</React.Fragment>
)} )}
</Page> </Page>
); );