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

fix loading state for tile layout

Browse source
This commit is contained in:
Sean Yesmunt 2020-08-26 17:16:45 -04:00
parent a386b4dc7e
commit 49a7f30f45
3 changed files with 80 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ui/component/claimListDiscover/view.jsx
View file

@ -9,6 +9,7 @@ import Button from 'component/button';
import moment from 'moment'; import moment from 'moment';
import ClaimList from 'component/claimList'; import ClaimList from 'component/claimList';
import ClaimPreview from 'component/claimPreview'; import ClaimPreview from 'component/claimPreview';
import ClaimPreviewTile from 'component/claimPreviewTile';
import I18nMessage from 'component/i18nMessage'; import I18nMessage from 'component/i18nMessage';
import ClaimListHeader from 'component/claimListHeader'; import ClaimListHeader from 'component/claimListHeader';
@ -434,6 +435,13 @@ function ClaimListDiscover(props: Props) {
hideBlock={hideBlock} hideBlock={hideBlock}
injectedItem={injectedItem} injectedItem={injectedItem}
/> />
{loading && (
<div className="claim-grid">
{new Array(pageSize || CS.PAGE_SIZE).fill(1).map((x, i) => (
<ClaimPreviewTile key={i} placeholder="loading" />
))}
</div>
)}
</div> </div>
) : ( ) : (
<div> <div>

23
ui/component/sideNavigation/view.jsx
View file

@ -276,6 +276,7 @@ function SideNavigation(props: Props) {
// @endif // @endif
})} })}
> >
<div>
<ul className={classnames('navigation-links', { 'navigation-links--micro': !sidebarOpen })}> <ul className={classnames('navigation-links', { 'navigation-links--micro': !sidebarOpen })}>
{TOP_LEVEL_LINKS.map(linkProps => { {TOP_LEVEL_LINKS.map(linkProps => {
const { hideForUnauth, ...passedProps } = linkProps; const { hideForUnauth, ...passedProps } = linkProps;
@ -296,6 +297,7 @@ function SideNavigation(props: Props) {
); );
})} })}
</ul> </ul>
{sidebarOpen && isPersonalized && subscriptions && subscriptions.length > 0 && ( {sidebarOpen && isPersonalized && subscriptions && subscriptions.length > 0 && (
<ul className="navigation__secondary navigation-links navigation-links--small"> <ul className="navigation__secondary navigation-links navigation-links--small">
{subscriptions.map(({ uri, channelName }, index) => ( {subscriptions.map(({ uri, channelName }, index) => (
@ -310,15 +312,7 @@ function SideNavigation(props: Props) {
))} ))}
</ul> </ul>
)} )}
{sidebarOpen && isPersonalized && followedTags && followedTags.length > 0 && ( </div>
<ul className="navigation__secondary navigation-links navigation-links--small">
{followedTags.map(({ name }, key) => (
<li key={name} className="navigation-link__wrapper">
<Button navigate={`/$/discover?t=${name}`} label={`#${name}`} className="navigation-link" />
</li>
))}
</ul>
)}
</nav> </nav>
)} )}
@ -331,6 +325,7 @@ function SideNavigation(props: Props) {
// @endif // @endif
})} })}
> >
<div>
<ul className="navigation-links--absolute"> <ul className="navigation-links--absolute">
{TOP_LEVEL_LINKS.map(linkProps => { {TOP_LEVEL_LINKS.map(linkProps => {
const { hideForUnauth, ...passedProps } = linkProps; const { hideForUnauth, ...passedProps } = linkProps;
@ -383,15 +378,7 @@ function SideNavigation(props: Props) {
))} ))}
</ul> </ul>
)} )}
{isPersonalized && followedTags && followedTags.length > 0 && ( </div>
<ul className="navigation__secondary navigation-links--small">
{followedTags.map(({ name }, key) => (
<li key={name} className="navigation-link__wrapper">
<Button navigate={`/$/discover?t=${name}`} label={`#${name}`} className="navigation-link" />
</li>
))}
</ul>
)}
</nav> </nav>
<div <div
className={classnames('navigation__overlay', { className={classnames('navigation__overlay', {

1
ui/scss/component/_claim-list.scss
View file

@ -328,6 +328,7 @@
margin-top: 0; margin-top: 0;
margin-left: var(--spacing-m); margin-left: var(--spacing-m);
justify-content: flex-start; justify-content: flex-start;
list-style: none;
.media__thumb { .media__thumb {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;