add placeholders to claim previews

This commit is contained in:
Sean Yesmunt 2019-07-01 00:35:36 -04:00
parent cc4ba46403
commit be50633b53
8 changed files with 27 additions and 53 deletions

View file

@ -21,6 +21,7 @@ type Props = {
empty?: string,
defaultSort?: boolean,
onScrollBottom?: any => void,
page?: number,
// If using the default header, this is a unique ID needed to persist the state of the filter setting
persistedStorageKey?: string,
};
@ -37,6 +38,7 @@ export default function ClaimList(props: Props) {
type,
header,
onScrollBottom,
page,
} = props;
const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
const hasUris = uris && !!uris.length;
@ -101,7 +103,7 @@ export default function ClaimList(props: Props) {
<ul>
{sortedUris.map((uri, index) => (
<React.Fragment key={uri}>
<ClaimPreview uri={uri} type={type} />
<ClaimPreview uri={uri} type={type} placeholder={loading && (!page || page === 1)} />
{index === 4 && injectedItem && <li className="claim-preview--injected">{injectedItem}</li>}
</React.Fragment>
))}

View file

@ -155,6 +155,7 @@ function ClaimListDiscover(props: Props) {
header={header}
headerAltControls={meta}
onScrollBottom={() => setPage(page + 1)}
page={page}
/>
{loading && page > 1 && new Array(PAGE_SIZE).fill(1).map((x, i) => <ClaimPreview key={i} placeholder />)}

View file

@ -1,35 +0,0 @@
import { connect } from 'react-redux';
import {
doResolveUri,
makeSelectClaimForUri,
makeSelectIsUriResolving,
makeSelectClaimIsMine,
makeSelectClaimIsPending,
makeSelectThumbnailForUri,
makeSelectTitleForUri,
makeSelectClaimIsNsfw,
} from 'lbry-redux';
import { selectBlackListedOutpoints } from 'lbryinc';
import { selectShowNsfw } from 'redux/selectors/settings';
import ClaimPreview from './view';
const select = (state, props) => ({
pending: makeSelectClaimIsPending(props.uri)(state),
claim: makeSelectClaimForUri(props.uri)(state),
obscureNsfw: !selectShowNsfw(state),
claimIsMine: makeSelectClaimIsMine(props.uri)(state),
isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
thumbnail: makeSelectThumbnailForUri(props.uri)(state),
title: makeSelectTitleForUri(props.uri)(state),
nsfw: makeSelectClaimIsNsfw(props.uri)(state),
blackListedOutpoints: selectBlackListedOutpoints(state),
});
const perform = dispatch => ({
resolveUri: uri => dispatch(doResolveUri(uri)),
});
export default connect(
select,
perform
)(ClaimPreview);

View file

@ -92,7 +92,7 @@ function ClaimPreview(props: Props) {
return null;
}
if (placeholder && !claim) {
if (placeholder || isResolvingUri) {
return (
<li className="claim-preview" disabled>
<div className="placeholder media__thumb" />

View file

@ -24,6 +24,7 @@ import {
import { doAuthenticate } from 'lbryinc';
import { lbrySettings as config, version as appVersion } from 'package.json';
import { push } from 'connected-react-router';
import { whiteListedReducers } from 'store';
// @if TARGET='app'
const { autoUpdater } = remote.require('electron-updater');
@ -327,7 +328,8 @@ export function doDaemonReady() {
export function doClearCache() {
return () => {
window.cacheStore.purge();
const reducersToClear = whiteListedReducers.filter(reducerKey => reducerKey !== 'tags');
window.cacheStore.purge(reducersToClear);
return Promise.resolve();
};

View file

@ -18,6 +18,6 @@
margin-top: var(--spacing-small);
width: 30%;
height: 2em;
height: 1.5em;
}
}

View file

@ -74,20 +74,20 @@ const appFilter = createFilter('app', ['hasClickedComment', 'searchOptionsExpand
// We only need to persist the receiveAddress for the wallet
const walletFilter = createFilter('wallet', ['receiveAddress']);
const searchFilter = createFilter('search', ['options']);
const whiteListedReducers = [
// @if TARGET='app'
'publish',
'wallet',
'fileInfo',
// @endif
'content',
'subscriptions',
'app',
'search',
'tags',
];
const persistOptions = {
whitelist: [
// @if TARGET='app'
'publish',
'wallet',
'fileInfo',
// @endif
'content',
'subscriptions',
'app',
'search',
'tags',
],
whitelist: whiteListedReducers,
// Order is important. Needs to be compressed last or other transforms can't
// read the data
transforms: [
@ -110,4 +110,4 @@ window.cacheStore = persistStore(store, persistOptions, err => {
}
});
export { store, history };
export { store, history, whiteListedReducers };

View file

@ -292,6 +292,7 @@
"Comment": "Comment",
"Your comment": "Your comment",
"Post": "Post",
<<<<<<< HEAD
"No modifier provided after separator %s.": "No modifier provided after separator %s.",
"Incompatible Daemon": "Incompatible Daemon",
"Incompatible daemon running": "Incompatible daemon running",
@ -308,6 +309,9 @@
"Your version is out of date and may be unreliable or insecure.": "Your version is out of date and may be unreliable or insecure.",
"Want to know what has changed?": "Want to know what has changed?",
"release notes": "release notes",
=======
"You haven't downloaded anything from LBRY yet.": "You haven't downloaded anything from LBRY yet.",
>>>>>>> ca0fd40a... add placeholders to claim previews
"Read the FAQ": "Read the FAQ",
"Our FAQ answers many common questions.": "Our FAQ answers many common questions.",
"Get Live Help": "Get Live Help",