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 ClaimList from 'component/claimList';
import ClaimPreview from 'component/claimPreview';
import ClaimPreviewTile from 'component/claimPreviewTile';
import I18nMessage from 'component/i18nMessage';
import ClaimListHeader from 'component/claimListHeader';
@ -434,6 +435,13 @@ function ClaimListDiscover(props: Props) {
hideBlock={hideBlock}
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>

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

@ -276,6 +276,7 @@ function SideNavigation(props: Props) {
// @endif
})}
>
<div>
<ul className={classnames('navigation-links', { 'navigation-links--micro': !sidebarOpen })}>
{TOP_LEVEL_LINKS.map(linkProps => {
const { hideForUnauth, ...passedProps } = linkProps;
@ -296,6 +297,7 @@ function SideNavigation(props: Props) {
);
})}
</ul>
{sidebarOpen && isPersonalized && subscriptions && subscriptions.length > 0 && (
<ul className="navigation__secondary navigation-links navigation-links--small">
{subscriptions.map(({ uri, channelName }, index) => (
@ -310,15 +312,7 @@ function SideNavigation(props: Props) {
))}
</ul>
)}
{sidebarOpen && isPersonalized && followedTags && followedTags.length > 0 && (
<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>
)}
</div>
</nav>
)}
@ -331,6 +325,7 @@ function SideNavigation(props: Props) {
// @endif
})}
>
<div>
<ul className="navigation-links--absolute">
{TOP_LEVEL_LINKS.map(linkProps => {
const { hideForUnauth, ...passedProps } = linkProps;
@ -383,15 +378,7 @@ function SideNavigation(props: Props) {
))}
</ul>
)}
{isPersonalized && followedTags && followedTags.length > 0 && (
<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>
)}
</div>
</nav>
<div
className={classnames('navigation__overlay', {

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

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