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 {
-  display: flex;
-  flex-grow: 1;
-  position: relative;
-  width: 100%;
-  overflow: hidden;
+.playground-background {
   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,52 +235,58 @@ export default class Playground extends Component<Props, State> {
       : null;
 
     const playground = (
-      <div
-        className={`Playground ${this.props.renderSidebar ? '' : 'standalone'}`}
-        onMouseDown={this.onMouseDown}
-        style={{height, maxHeight: height}}
-        ref={ref => {
-          this._containerRef = ref;
-        }}>
-        <YogaNode
-          layoutDefinition={layoutDefinition}
-          selectedNodePath={selectedNodePath}
-          onClick={selectedNodePath => this.setState({selectedNodePath})}
-          onDoubleClick={this.onAdd}
-          direction={direction}
-          showGuides={this.props.showGuides}
-        />
-        {!this.props.renderSidebar && (
-          <Sidebar>
-            {this.state.selectedNodePath ? (
-              <Editor
-                node={selectedNode}
-                selectedNodeIsRoot={
-                  selectedNodePath ? selectedNodePath.length === 0 : false
-                }
-                onChangeLayout={this.onChangeLayout}
-                // @ts-ignore
-                onChangeSetting={(key, value) => this.setState({[key]: value})}
-                direction={direction}
-                onRemove={
-                  selectedNodePath && selectedNodePath.length > 0
-                    ? this.onRemove
-                    : undefined
-                }
-                onAdd={
-                  selectedNodePath &&
-                  selectedNodePath.length < this.props.maxDepth
-                    ? this.onAdd
-                    : undefined
-                }
-              />
-            ) : (
-              <div className="NoContent">
-                Select a node to edit its properties
-              </div>
-            )}
-          </Sidebar>
-        )}
+      <div className="playground-background">
+        <div
+          className={`Playground ${
+            this.props.renderSidebar ? '' : 'standalone'
+          }`}
+          onMouseDown={this.onMouseDown}
+          style={{height, maxHeight: height}}
+          ref={ref => {
+            this._containerRef = ref;
+          }}>
+          <YogaNode
+            layoutDefinition={layoutDefinition}
+            selectedNodePath={selectedNodePath}
+            onClick={selectedNodePath => this.setState({selectedNodePath})}
+            onDoubleClick={this.onAdd}
+            direction={direction}
+            showGuides={this.props.showGuides}
+          />
+          {!this.props.renderSidebar && (
+            <Sidebar>
+              {this.state.selectedNodePath ? (
+                <Editor
+                  node={selectedNode}
+                  selectedNodeIsRoot={
+                    selectedNodePath ? selectedNodePath.length === 0 : false
+                  }
+                  onChangeLayout={this.onChangeLayout}
+                  // @ts-ignore
+                  onChangeSetting={(key, value) =>
+                    this.setState({[key]: value})
+                  }
+                  direction={direction}
+                  onRemove={
+                    selectedNodePath && selectedNodePath.length > 0
+                      ? this.onRemove
+                      : undefined
+                  }
+                  onAdd={
+                    selectedNodePath &&
+                    selectedNodePath.length < this.props.maxDepth
+                      ? this.onAdd
+                      : undefined
+                  }
+                />
+              ) : (
+                <div className="NoContent">
+                  Select a node to edit its properties
+                </div>
+              )}
+            </Sidebar>
+          )}
+        </div>
       </div>
     );
 

website-next/src/pages/index.tsx

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