diff --git a/app/soapbox/components/scrollable_list.js b/app/soapbox/components/scrollable_list.js
index b954dcdec..33d05e40b 100644
--- a/app/soapbox/components/scrollable_list.js
+++ b/app/soapbox/components/scrollable_list.js
@@ -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>
diff --git a/app/styles/placeholder.scss b/app/styles/placeholder.scss
index c30d33a5b..79f8e48d7 100644
--- a/app/styles/placeholder.scss
+++ b/app/styles/placeholder.scss
@@ -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;
+}