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>

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

@ -276,66 +276,11 @@ function SideNavigation(props: Props) {
// @endif // @endif
})} })}
> >
<ul className={classnames('navigation-links', { 'navigation-links--micro': !sidebarOpen })}> <div>
{TOP_LEVEL_LINKS.map(linkProps => { <ul className={classnames('navigation-links', { 'navigation-links--micro': !sidebarOpen })}>
const { hideForUnauth, ...passedProps } = linkProps;
return !email && linkProps.hideForUnauth && IS_WEB ? null : (
<li key={linkProps.icon}>
<Button
{...passedProps}
label={__(linkProps.label)}
icon={pulseLibrary && linkProps.icon === ICONS.LIBRARY ? ICONS.PURCHASED : linkProps.icon}
className={classnames('navigation-link', {
'navigation-link--pulse': linkProps.icon === ICONS.LIBRARY && pulseLibrary,
'navigation-link--highlighted': linkProps.icon === ICONS.NOTIFICATION && unreadCount > 0,
})}
activeClass="navigation-link--active"
/>
{linkProps.extra}
</li>
);
})}
</ul>
{sidebarOpen && isPersonalized && subscriptions && subscriptions.length > 0 && (
<ul className="navigation__secondary navigation-links navigation-links--small">
{subscriptions.map(({ uri, channelName }, index) => (
<li key={uri} className="navigation-link__wrapper">
<Button
navigate={uri}
label={channelName}
className="navigation-link"
activeClass="navigation-link--active"
/>
</li>
))}
</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>
)}
</nav>
)}
{(isOnFilePage || isMediumScreen) && sidebarOpen && (
<>
<nav
className={classnames('navigation--absolute', {
// @if TARGET='app'
'navigation--mac': IS_MAC,
// @endif
})}
>
<ul className="navigation-links--absolute">
{TOP_LEVEL_LINKS.map(linkProps => { {TOP_LEVEL_LINKS.map(linkProps => {
const { hideForUnauth, ...passedProps } = linkProps; const { hideForUnauth, ...passedProps } = linkProps;
return !email && linkProps.hideForUnauth && IS_WEB ? null : (
return !email && hideForUnauth && IS_WEB ? null : (
<li key={linkProps.icon}> <li key={linkProps.icon}>
<Button <Button
{...passedProps} {...passedProps}
@ -352,25 +297,9 @@ function SideNavigation(props: Props) {
); );
})} })}
</ul> </ul>
<ul className="navigation-links--absolute">
{subLinks.map(linkProps => {
const { hideForUnauth, ...passedProps } = linkProps;
return !email && hideForUnauth && IS_WEB ? null : ( {sidebarOpen && isPersonalized && subscriptions && subscriptions.length > 0 && (
<li key={linkProps.icon} className="mobile-only"> <ul className="navigation__secondary navigation-links navigation-links--small">
<Button
{...passedProps}
label={__(linkProps.label)}
className="navigation-link"
activeClass="navigation-link--active"
/>
{linkProps.extra}
</li>
);
})}
</ul>
{isPersonalized && subscriptions && subscriptions.length > 0 && (
<ul className="navigation__secondary navigation-links--small">
{subscriptions.map(({ uri, channelName }, index) => ( {subscriptions.map(({ uri, channelName }, index) => (
<li key={uri} className="navigation-link__wrapper"> <li key={uri} className="navigation-link__wrapper">
<Button <Button
@ -383,15 +312,73 @@ function SideNavigation(props: Props) {
))} ))}
</ul> </ul>
)} )}
{isPersonalized && followedTags && followedTags.length > 0 && ( </div>
<ul className="navigation__secondary navigation-links--small"> </nav>
{followedTags.map(({ name }, key) => ( )}
<li key={name} className="navigation-link__wrapper">
<Button navigate={`/$/discover?t=${name}`} label={`#${name}`} className="navigation-link" /> {(isOnFilePage || isMediumScreen) && sidebarOpen && (
</li> <>
))} <nav
className={classnames('navigation--absolute', {
// @if TARGET='app'
'navigation--mac': IS_MAC,
// @endif
})}
>
<div>
<ul className="navigation-links--absolute">
{TOP_LEVEL_LINKS.map(linkProps => {
const { hideForUnauth, ...passedProps } = linkProps;
return !email && hideForUnauth && IS_WEB ? null : (
<li key={linkProps.icon}>
<Button
{...passedProps}
label={__(linkProps.label)}
icon={pulseLibrary && linkProps.icon === ICONS.LIBRARY ? ICONS.PURCHASED : linkProps.icon}
className={classnames('navigation-link', {
'navigation-link--pulse': linkProps.icon === ICONS.LIBRARY && pulseLibrary,
'navigation-link--highlighted': linkProps.icon === ICONS.NOTIFICATION && unreadCount > 0,
})}
activeClass="navigation-link--active"
/>
{linkProps.extra}
</li>
);
})}
</ul> </ul>
)} <ul className="navigation-links--absolute">
{subLinks.map(linkProps => {
const { hideForUnauth, ...passedProps } = linkProps;
return !email && hideForUnauth && IS_WEB ? null : (
<li key={linkProps.icon} className="mobile-only">
<Button
{...passedProps}
label={__(linkProps.label)}
className="navigation-link"
activeClass="navigation-link--active"
/>
{linkProps.extra}
</li>
);
})}
</ul>
{isPersonalized && subscriptions && subscriptions.length > 0 && (
<ul className="navigation__secondary navigation-links--small">
{subscriptions.map(({ uri, channelName }, index) => (
<li key={uri} className="navigation-link__wrapper">
<Button
navigate={uri}
label={channelName}
className="navigation-link"
activeClass="navigation-link--active"
/>
</li>
))}
</ul>
)}
</div>
</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;