diff --git a/app/soapbox/components/scrollable_list.tsx b/app/soapbox/components/scrollable_list.tsx index 0e2708dd8..d5bfd6025 100644 --- a/app/soapbox/components/scrollable_list.tsx +++ b/app/soapbox/components/scrollable_list.tsx @@ -120,7 +120,6 @@ const ScrollableList = React.forwardRef(({ // NOTE: We are doing some trickery to load a feed of placeholders // Virtuoso's `EmptyPlaceholder` unfortunately doesn't work for our use-case 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 // (Don't use Virtuoso's `Footer` component because it doesn't preserve its height) @@ -216,8 +215,7 @@ const ScrollableList = React.forwardRef(({ return 0; }, [showLoading, initialTopMostItemIndex]); - /** Render the actual Virtuoso list. */ - const renderFeed = (): JSX.Element => ( + return ( (({ }} /> ); - - // Conditionally render inner elements. - if (isEmpty) { - return renderEmpty(); - } else { - return renderFeed(); - } }); export default ScrollableList; diff --git a/app/styles/basics.scss b/app/styles/basics.scss index 987a6d58d..9db26912a 100644 --- a/app/styles/basics.scss +++ b/app/styles/basics.scss @@ -106,3 +106,9 @@ noscript { .greentext { color: #789922; } + +// Virtuoso empty placeholder fix. +// https://gitlab.com/petyosi/soapbox-fe/-/commit/1e22c39934b60e5e186de804060ecfdf1955b506 +div[data-viewport-type="window"] { + position: static !important; +}