Render the timeline post's content only when it reaches the viewport

FreeFeed · Oct 22, 2024 · 57f61e3 · 57f61e3
1 parent 946138b
commit 57f61e3
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/styles/shared/post.scss b/styles/shared/post.scss
@@ -454,6 +454,19 @@ code.inline-code {
   }
 }
 
+.timeline-post {
+  /**
+   * Render the post's content only when it reaches the viewport.
+   */
+  content-visibility: auto;
+
+  /** 
+   * Empirically determined height for the post's placeholder. It will be
+   * replaced with the actual height of the post when it reaches the viewport.
+   */
+  contain-intrinsic-size: auto calc(440px - min(100vw, 800px) / 6);
+}
+
 .timeline-post.direct-post {
   --bg-color: #eee;
   --arrow-color: #fff;