add placeholders to claim previews

src/ui/component/claimList/view.jsx

@@ -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>
           ))}

src/ui/component/claimListDiscover/view.jsx

@@ -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 />)}

src/ui/component/claimPreview/index.js~HEAD

@@ -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);

src/ui/component/claimPreview/view.jsx

@@ -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" />

src/ui/redux/actions/app.js

@@ -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();
   };

src/ui/scss/component/_placeholder.scss

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

src/ui/store.js

@@ -74,9 +74,7 @@ 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 persistOptions = {
-  whitelist: [
+const whiteListedReducers = [
   // @if TARGET='app'
   'publish',
   'wallet',
@@ -87,7 +85,9 @@ const persistOptions = {
   'app',
   'search',
   'tags',
-  ],
+];
+const persistOptions = {
+  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 };

static/locales/en.json

@@ -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",