Better async loading behavior

website-next/src/components/Playground/index.css

@@ -5,19 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
- .PlaygroundContainer {
+.PlaygroundContainer {
   display: flex;
   flex-direction: row;
   flex-grow: 1;
   width: 100%;
 }
 
-.Playground {
+.playground-background {
-  display: flex;
-  flex-grow: 1;
-  position: relative;
-  width: 100%;
-  overflow: hidden;
   background: linear-gradient(-90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
     linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
     linear-gradient(-90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
@@ -41,6 +36,15 @@
     100px 100px, 100px 100px, 100px 100px;
 }
 
+.Playground {
+  display: flex;
+  flex-grow: 1;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  animation: playground-content-fade-in-frames 50ms ease-in;
+}
+
 .Playground > .YogaNode {
   margin: auto;
   position: static;
@@ -72,3 +76,12 @@
 .ant-modal-content {
   overflow: hidden;
 }
+
+@keyframes playground-content-fade-in-frames {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}

website-next/src/components/Playground/index.tsx

@@ -235,8 +235,11 @@ export default class Playground extends Component<Props, State> {
       : null;
 
     const playground = (
+      <div className="playground-background">
         <div
-        className={`Playground ${this.props.renderSidebar ? '' : 'standalone'}`}
+          className={`Playground ${
+            this.props.renderSidebar ? '' : 'standalone'
+          }`}
           onMouseDown={this.onMouseDown}
           style={{height, maxHeight: height}}
           ref={ref => {
@@ -260,7 +263,9 @@ export default class Playground extends Component<Props, State> {
                   }
                   onChangeLayout={this.onChangeLayout}
                   // @ts-ignore
-                onChangeSetting={(key, value) => this.setState({[key]: value})}
+                  onChangeSetting={(key, value) =>
+                    this.setState({[key]: value})
+                  }
                   direction={direction}
                   onRemove={
                     selectedNodePath && selectedNodePath.length > 0
@@ -282,6 +287,7 @@ export default class Playground extends Component<Props, State> {
             </Sidebar>
           )}
         </div>
+      </div>
     );
 
     if (this.props.renderSidebar) {

website-next/src/pages/index.tsx

@@ -38,16 +38,18 @@ const LazyPlayground = React.lazy(() => import('../components/Playground'));
 
 function ClientPlayground() {
   const fallback = <div className={styles.playgroundFallback} />;
-  return <BrowserOnly fallback={fallback}>
+
+  return (
+    <BrowserOnly fallback={fallback}>
       {() => (
         <Suspense fallback={fallback}>
           <LazyPlayground />
         </Suspense>
       )}
-</BrowserOnly>;
+    </BrowserOnly>
+  );
 }
 
-
 export default function Home(): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
   return (