bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Placeholder: display placeholders in slist while next page is loading

Browse source
This commit is contained in:
Alex Gleason 2021-10-12 19:14:27 -05:00
parent f6b1bca574
commit 8a26db57f7
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 44 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/soapbox/components/scrollable_list.js
View file

@ -260,7 +260,7 @@ export default class ScrollableList extends PureComponent {
}
renderFeed = () => {
const { children, scrollKey, isLoading, hasMore, prepend, onLoadMore } = this.props;
const { children, scrollKey, isLoading, hasMore, prepend, onLoadMore, placeholderComponent: Placeholder } = this.props;
const childrenCount = React.Children.count(children);
const trackScroll = true; //placeholder
const loadMore = (hasMore && onLoadMore) ? <LoadMore visible={!isLoading} onClick={this.handleLoadMore} /> : null;
@ -287,6 +287,13 @@ export default class ScrollableList extends PureComponent {
})}
</IntersectionObserverArticleContainer>
))}
{(isLoading && Placeholder) && (
<div className='slist__placeholder'>
{Array(3).fill().map((_, i) => (
<Placeholder key={i} />
))}
</div>
)}
{this.getMoreFollows()}
{loadMore}
</div>

40
app/styles/placeholder.scss
View file

@ -14,11 +14,11 @@
height: 100%;
background-image: linear-gradient(
90deg,
hsla(var(--foreground-color_hsl), 0) 0%,
hsla(var(--foreground-color_hsl), 0) 25%,
transparent 0%,
transparent 25%,
var(--foreground-color) 50%,
hsla(var(--foreground-color_hsl), 0) 70%,
hsla(var(--foreground-color_hsl), 0) 100%
transparent 70%,
transparent 100%
);
background-size: 200%;
animation: placeholder-pulse 2s infinite;
@ -55,3 +55,35 @@
color: var(--brand-color) !important;
}
}
.slist {
position: relative;
&__placeholder {
position: absolute;
width: 100%;
max-height: 300px;
overflow-y: hidden;
background: var(--foreground-color);
box-shadow: 0 10px 6px 0 rgb(0 0 0 / 10%);
&::after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
z-index: 1;
background-image: linear-gradient(0deg, var(--background-color) 0%, transparent 50%, transparent 100%);
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
.column--transparent .slist__placeholder {
background: transparent;
box-shadow: none;
}