moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Placeholder: display placeholders in slist while next page is loading

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

40
app/styles/placeholder.scss
View File

@ -14,11 +14,11 @@
height: 100%; height: 100%;
background-image: linear-gradient( background-image: linear-gradient(
90deg, 90deg,
hsla(var(--foreground-color_hsl), 0) 0%, transparent 0%,
hsla(var(--foreground-color_hsl), 0) 25%, transparent 25%,
var(--foreground-color) 50%, var(--foreground-color) 50%,
hsla(var(--foreground-color_hsl), 0) 70%, transparent 70%,
hsla(var(--foreground-color_hsl), 0) 100% transparent 100%
); );
background-size: 200%; background-size: 200%;
animation: placeholder-pulse 2s infinite; animation: placeholder-pulse 2s infinite;
@ -55,3 +55,35 @@
color: var(--brand-color) !important; 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;
}