LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Use the same default spinner style for both Tile and List

Browse source 
The tile placeholder method didn't work well because the component doesn't know how big the page size is, so we always end up rendering 1 placeholder tile, followed by N (= page size) placeholders (if not yet resolved). It's pretty ugly.

Removed comments:
- Incorrect/misleading: "injected item" does not mean "ads". It can be any React component that you want to put at a specific index.
- Redundant: don't explain the syntax. It's very annoying having to maintain the comment when the logic changes.
This commit is contained in:
infinite-persistence 2022-03-09 01:51:41 +08:00 committed by Thomas Zarebczan
parent af8d742b75
commit 7904e751ac
1 changed files with 26 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
ui/component/claimList/view.jsx
View file

@ -100,9 +100,8 @@ export default function ClaimList(props: Props) {
const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW); const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
// reference to the claim-grid // Resolve the index for injectedItem, if provided; else injectedIndex will be 'undefined'.
const listRef = React.useRef(); const listRef = React.useRef();
// determine the index where the ad should be injected
const injectedIndex = useLastVisibleItem(injectedItem, listRef); const injectedIndex = useLastVisibleItem(injectedItem, listRef);
// Exclude prefix uris in these results variables. We don't want to show // Exclude prefix uris in these results variables. We don't want to show
@ -149,7 +148,6 @@ export default function ClaimList(props: Props) {
}, []); }, []);
// @if process.env.NODE_ENV!='production' // @if process.env.NODE_ENV!='production'
// code to enable replacing of a claim tile isn't available here yet
if (injectedItem && injectedItem.replace) { if (injectedItem && injectedItem.replace) {
throw new Error('claimList: "injectedItem.replace" is not implemented yet'); throw new Error('claimList: "injectedItem.replace" is not implemented yet');
} }
@ -201,7 +199,6 @@ export default function ClaimList(props: Props) {
/> />
); );
// returns injected ad DOM when indexes match
const getInjectedItem = (index) => { const getInjectedItem = (index) => {
if (injectedItem && injectedItem.node && injectedIndex === index) { if (injectedItem && injectedItem.node && injectedIndex === index) {
return injectedItem.node; return injectedItem.node;
@ -210,26 +207,31 @@ export default function ClaimList(props: Props) {
}; };
return tileLayout && !header ? ( return tileLayout && !header ? (
<section ref={listRef} className={classnames('claim-grid', { 'swipe-list': swipeLayout })}> <>
{urisLength > 0 && <section ref={listRef} className={classnames('claim-grid', { 'swipe-list': swipeLayout })}>
tileUris.map((uri, index) => ( {urisLength > 0 &&
<React.Fragment key={uri}> tileUris.map((uri, index) => (
{getInjectedItem(index)} <React.Fragment key={uri}>
{/* inject ad node */} {getInjectedItem(index)}
<ClaimPreviewTile <ClaimPreviewTile
uri={uri} uri={uri}
showHiddenByUser={showHiddenByUser} showHiddenByUser={showHiddenByUser}
properties={renderProperties} properties={renderProperties}
collectionId={collectionId} collectionId={collectionId}
showNoSourceClaims={showNoSourceClaims} showNoSourceClaims={showNoSourceClaims}
swipeLayout={swipeLayout} swipeLayout={swipeLayout}
/> />
</React.Fragment> </React.Fragment>
))} ))}
{loading && useLoadingSpinner && <ClaimPreviewTile placeholder="loading" swipeLayout={swipeLayout} />} {!timedOut && urisLength === 0 && !loading && <div className="empty main--empty">{empty || noResultMsg}</div>}
{!timedOut && urisLength === 0 && !loading && <div className="empty main--empty">{empty || noResultMsg}</div>} {timedOut && timedOutMessage && <div className="empty main--empty">{timedOutMessage}</div>}
{timedOut && timedOutMessage && <div className="empty main--empty">{timedOutMessage}</div>} </section>
</section> {loading && useLoadingSpinner && (
<div className="spinnerArea--centered">
<Spinner type="small" />
</div>
)}
</>
) : ( ) : (
<section <section
className={classnames('claim-list', { className={classnames('claim-list', {