add placeholders to claim previews
This commit is contained in:
parent
cc4ba46403
commit
be50633b53
8 changed files with 27 additions and 53 deletions
|
@ -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>
|
||||
))}
|
||||
|
|
|
@ -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 />)}
|
||||
|
|
|
@ -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);
|
|
@ -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" />
|
||||
|
|
|
@ -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();
|
||||
};
|
||||
|
|
|
@ -18,6 +18,6 @@
|
|||
margin-top: var(--spacing-small);
|
||||
|
||||
width: 30%;
|
||||
height: 2em;
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 };
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in a new issue