From 8e03461a649e78fc6c6b32f3c3786095cf5fd9aa Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Sat, 4 Feb 2023 23:57:44 +0000
Subject: [PATCH] fade

---
 beta/src/components/Layout/HomeContent.js | 32 ++++++++++++-----------
 beta/src/styles/index.css                 |  9 +++++++
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/beta/src/components/Layout/HomeContent.js b/beta/src/components/Layout/HomeContent.js
index 077d049d0..1d15841e6 100644
--- a/beta/src/components/Layout/HomeContent.js
+++ b/beta/src/components/Layout/HomeContent.js
@@ -548,20 +548,22 @@ async function PostComments({ postId }) {
               setCommentsPromise={setCommentsPromise}>
               <ExamplePanel noPadding={true} noShadow={true} height={544}>
                 <Suspense fallback={null}>
-                  <PostContext.Provider
-                    value={{
-                      currentUser: author,
-                      onAddComment: handleAddComment,
-                    }}>
-                    <PostPage
-                      post={{
-                        coverUrl: 'https://i.imgur.com/Q7TJkPm.jpg',
-                        comments,
-                      }}
-                      postPromise={postPromise}
-                      commentsPromise={commentsPromise}
-                    />
-                  </PostContext.Provider>
+                  <div style={{animation: 'fadein 150ms'}}>
+                    <PostContext.Provider
+                      value={{
+                        currentUser: author,
+                        onAddComment: handleAddComment,
+                      }}>
+                      <PostPage
+                        post={{
+                          coverUrl: 'https://i.imgur.com/Q7TJkPm.jpg',
+                          comments,
+                        }}
+                        postPromise={postPromise}
+                        commentsPromise={commentsPromise}
+                      />
+                    </PostContext.Provider>
+                  </div>
                 </Suspense>
               </ExamplePanel>
             </BrowserChrome>
@@ -602,7 +604,7 @@ function BrowserChrome({children, setPostPromise, setCommentsPromise}) {
       setTimeout(() => {
         postPromise._resolved = true;
         resolve();
-      }, 800);
+      }, 200);
     });
     const commentsPromise = new Promise((resolve) => {
       setTimeout(() => {
diff --git a/beta/src/styles/index.css b/beta/src/styles/index.css
index 462e33fb9..dfaa56f3d 100644
--- a/beta/src/styles/index.css
+++ b/beta/src/styles/index.css
@@ -322,3 +322,12 @@ ol.mdx-illustration-block {
     transform: translateX(-50%) translateY(-100%) rotate(90deg);
   }
 }
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}