From 032e17cecd4ffeaa1d92e784245bae93baae1298 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Wed, 21 Jul 2021 21:34:46 +0800
Subject: [PATCH] Improve CLS on Posts

## Issue
6068 Fix "Cumulative Layout Shift" for Core Web Vitals

In Posts, the Comments section appears first while we fetch the MD file. When the MD is fetched, Comments get pushed to the bottom (or shifted up for short posts), hence the red CLS scores.

## Approach
There are too many layers between `<FilePage>` and `<DocumentViewer>` to pass the `loading` state around to hide the Comments section, so just make Comments fade in after a 2s delay.

## Changes
- Posts: Add 2s fade-in delay to Comments.
- Posts: remove the gray placeholder. This improves the score a bit more, and reduces flicker as well. There's already a spinner from `FileRenderInline` to tell the user to be patient.
- Posts: add a minimum 30vh height so that short posts don't get collapsed too much, causing the `FileDetails` and Comments to shift. Small shifts are fine as long as CLS is below 0.1.
---
 ui/component/postViewer/view.jsx        |  6 ++++--
 ui/component/viewers/documentViewer.jsx |  3 +--
 ui/scss/component/_file-render.scss     |  4 ++++
 ui/scss/component/_main.scss            | 14 ++++++++++++++
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/ui/component/postViewer/view.jsx b/ui/component/postViewer/view.jsx
index 5cb3fe111..02e280fb3 100644
--- a/ui/component/postViewer/view.jsx
+++ b/ui/component/postViewer/view.jsx
@@ -104,8 +104,10 @@ function PostViewer(props: Props) {
 
       <ClaimAuthor uri={uri} />
 
-      <FileRenderInitiator uri={uri} />
-      <FileRenderInline uri={uri} />
+      <div className="file-render--post-container">
+        <FileRenderInitiator uri={uri} />
+        <FileRenderInline uri={uri} />
+      </div>
       <FileActions uri={uri} />
     </div>
   );
diff --git a/ui/component/viewers/documentViewer.jsx b/ui/component/viewers/documentViewer.jsx
index 8bd17f153..90b3ef1ab 100644
--- a/ui/component/viewers/documentViewer.jsx
+++ b/ui/component/viewers/documentViewer.jsx
@@ -86,13 +86,12 @@ class DocumentViewer extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { error, loading, content } = this.state;
+    const { error, content } = this.state;
     const isReady = content && !error;
     const errorMessage = __("Sorry, looks like we can't load the document.");
 
     return (
       <div className="file-viewer file-viewer--document">
-        {loading && !error && <div className="placeholder--text-document" />}
         {error && <LoadingScreen status={errorMessage} spinner={!error} />}
         {isReady && this.renderDocument()}
       </div>
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index 14226fba5..60d64bc99 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -105,6 +105,10 @@
   aspect-ratio: 16 / 9;
 }
 
+.file-render--post-container {
+  min-height: 30vh;
+}
+
 .file-render__header {
   display: flex;
   justify-content: space-between;
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index 698fef3f2..e4814d29a 100644
--- a/ui/scss/component/_main.scss
+++ b/ui/scss/component/_main.scss
@@ -95,9 +95,23 @@
     }
   }
 
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
   .file-page__post-comments {
     margin-top: var(--spacing-l);
 
+    opacity: 0;
+    animation: fadeIn 2s;
+    animation-delay: 2s;
+    animation-fill-mode: forwards;
+
     @media (min-width: $breakpoint-small) {
       padding: var(--spacing-m);
     }