fix loading state for tile layout
This commit is contained in:
parent
a386b4dc7e
commit
49a7f30f45
3 changed files with 80 additions and 84 deletions
|
@ -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>
|
||||
|
|
|
@ -276,66 +276,11 @@ function SideNavigation(props: Props) {
|
|||
// @endif
|
||||
})}
|
||||
>
|
||||
<ul className={classnames('navigation-links', { 'navigation-links--micro': !sidebarOpen })}>
|
||||
{TOP_LEVEL_LINKS.map(linkProps => {
|
||||
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">
|
||||
<div>
|
||||
<ul className={classnames('navigation-links', { 'navigation-links--micro': !sidebarOpen })}>
|
||||
{TOP_LEVEL_LINKS.map(linkProps => {
|
||||
const { hideForUnauth, ...passedProps } = linkProps;
|
||||
|
||||
return !email && hideForUnauth && IS_WEB ? null : (
|
||||
return !email && linkProps.hideForUnauth && IS_WEB ? null : (
|
||||
<li key={linkProps.icon}>
|
||||
<Button
|
||||
{...passedProps}
|
||||
|
@ -352,25 +297,9 @@ function SideNavigation(props: Props) {
|
|||
);
|
||||
})}
|
||||
</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">
|
||||
{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
|
||||
|
@ -383,15 +312,73 @@ 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>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
)}
|
||||
|
||||
{(isOnFilePage || isMediumScreen) && sidebarOpen && (
|
||||
<>
|
||||
<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 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>
|
||||
<div
|
||||
className={classnames('navigation__overlay', {
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue