docs: lazy load sandbox

website/docusaurus.config.js

@@ -8,7 +8,7 @@ const lightCodeTheme = require('prism-react-renderer/themes/github');
 const config = {
   baseUrl: '/',
   favicon: 'favicon.ico',
-  title: 'Vest Validations Framework',
+  title: 'Vest',
   tagline:
     'Declarative validations framework inspired by unit testing libraries',
   url: 'https://vestjs.dev',

website/src/components/Demo.js

@@ -1,11 +1,24 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import styles from './Demo.module.css';
 import commonStyles from './Common.module.css';
 
+let initialized = false;
+
 export default function Demo() {
-  const [currentSandbox, setCurrentSandbox] = useState(0);
+  const [currentSandbox, setCurrentSandbox] = useState(null);
+
+  useEffect(() => {
+    if (initialized) {
+      return;
+    }
+
+    setTimeout(() => {
+      initialized = true;
+      setCurrentSandbox(currentSandbox => currentSandbox ?? 0);
+    }, 1500);
+  }, []);
 
   return (
     <section className={clsx(styles.demo, commonStyles.main_section_centered)}>
@@ -25,7 +38,11 @@ export default function Demo() {
           ))}
         </div>
         <div className={styles.demoWrapper}>
-          <Sandbox {...embedLinks[currentSandbox]} />
+          {initialized ? (
+            <Sandbox {...embedLinks[currentSandbox]} />
+          ) : (
+            <div className={styles.sandbox}></div>
+          )}
         </div>
       </div>
     </section>
@@ -36,7 +53,7 @@ function Sandbox({ title, src }) {
   return (
     <iframe
       src={src}
-      className={styles.sandboxIframe}
+      className={styles.sandbox}
       title={title}
       allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
       sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"

website/src/components/Demo.module.css

@@ -1,4 +1,4 @@
-.sandboxIframe {
+.sandbox {
   width: 100%;
   height: 500px;
   border: 0;
@@ -13,6 +13,7 @@
 .demoWrapper {
   border: 1px solid var(--ifm-color-primary-lighter);
   border-radius: 4px;
+  background: #191919;
 }
 
 .demoSwitchWrapper {