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

Merge branch 'empty-timeline' into 'develop'

Browse source 
ScrollableList: use Virtuoso's native EmptyComponent again, fix timeline pagination when items are filtered

See merge request soapbox-pub/soapbox-fe!1692
This commit is contained in:
Alex Gleason 2022-08-02 13:53:18 +00:00
commit d26e814472
2 changed files with 7 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/soapbox/components/scrollable_list.tsx
View file

@ -120,7 +120,6 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
// NOTE: We are doing some trickery to load a feed of placeholders // NOTE: We are doing some trickery to load a feed of placeholders
// Virtuoso's `EmptyPlaceholder` unfortunately doesn't work for our use-case // Virtuoso's `EmptyPlaceholder` unfortunately doesn't work for our use-case
const data = showPlaceholder ? Array(placeholderCount).fill('') : elements; const data = showPlaceholder ? Array(placeholderCount).fill('') : elements;
const isEmpty = data.length === 0; // Yes, if it has placeholders it isn't "empty"
// Add a placeholder at the bottom for loading // Add a placeholder at the bottom for loading
// (Don't use Virtuoso's `Footer` component because it doesn't preserve its height) // (Don't use Virtuoso's `Footer` component because it doesn't preserve its height)
@ -216,8 +215,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
return 0; return 0;
}, [showLoading, initialTopMostItemIndex]); }, [showLoading, initialTopMostItemIndex]);
/** Render the actual Virtuoso list. */ return (
const renderFeed = (): JSX.Element => (
<Virtuoso <Virtuoso
ref={ref} ref={ref}
id={id} id={id}
@ -245,13 +243,6 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
}} }}
/> />
); );
// Conditionally render inner elements.
if (isEmpty) {
return renderEmpty();
} else {
return renderFeed();
}
}); });
export default ScrollableList; export default ScrollableList;

6
app/styles/basics.scss
View file

@ -106,3 +106,9 @@ noscript {
.greentext { .greentext {
color: #789922; color: #789922;
} }
// Virtuoso empty placeholder fix.
// https://gitlab.com/petyosi/soapbox-fe/-/commit/1e22c39934b60e5e186de804060ecfdf1955b506
div[data-viewport-type="window"] {
position: static !important;
}