diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 35f05e474..644aca018 100644
--- a/website/docusaurus.config.js
+++ b/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',
diff --git a/website/src/components/Demo.js b/website/src/components/Demo.js
index a1b3d4ff9..42e06ff08 100644
--- a/website/src/components/Demo.js
+++ b/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 (
@@ -25,7 +38,11 @@ export default function Demo() {
))}
-
+ {initialized ? (
+
+ ) : (
+
+ )}
@@ -36,7 +53,7 @@ function Sandbox({ title, src }) {
return (