Add timeout to not found page

documentation/src/theme/NotFound/Content/LoadingForNotFound.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import Heading from '@theme/Heading';
+import type { Props } from '@theme/NotFound/Content';
+
+function LoadingForNotFound({ className }: Props) {
+  return (
+    <main className={clsx('container margin-vert--xl', className)}>
+      <div className="row">
+        <div className="col col--6 col--offset-3">
+          <Heading as="h1" className="hero__title">
+            <Translate id="theme.NotFound.title" description="The title of the 404 page">
+              Loading Page...
+            </Translate>
+          </Heading>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+export default LoadingForNotFound;

documentation/src/theme/NotFound/Content/NotFoundWithTimeout.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import Heading from '@theme/Heading';
+import type { Props } from '@theme/NotFound/Content';
+
+function NotFoundWithTimeout({ className }: Props) {
+  useTimeout(500);
+
+  return (
+    <main className={clsx('container margin-vert--xl', className)}>
+      <div className="row">
+        <div className="col col--6 col--offset-3">
+          <Heading as="h1" className="hero__title">
+            <Translate id="theme.NotFound.title" description="The title of the 404 page">
+              Page Not Found
+            </Translate>
+          </Heading>
+          <p>
+            <Translate id="theme.NotFound.p1" description="The first paragraph of the 404 page">
+              We could not find what you were looking for.
+            </Translate>
+          </p>
+          <p>
+            <Translate id="theme.NotFound.p2" description="The 2nd paragraph of the 404 page">
+              Please contact the owner of the site that linked you to the original URL and let them
+              know their link is broken.
+            </Translate>
+          </p>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+let fullfilled = false;
+let promise: Promise<void> | null = null;
+
+const useTimeout = (ms: number) => {
+  if (!fullfilled) {
+    throw (promise ||= new Promise((res) => {
+      setTimeout(() => {
+        fullfilled = true;
+        res();
+      }, ms);
+    }));
+  }
+};
+
+export default NotFoundWithTimeout;

documentation/src/theme/NotFound/Content/index.tsx

@@ -0,0 +1,12 @@
+import React, { Suspense } from 'react';
+import type { Props } from '@theme/NotFound/Content';
+import NotFoundWithTimeout from '@site/src/theme/NotFound/Content/NotFoundWithTimeout';
+import LoadingForNotFound from '@site/src/theme/NotFound/Content/LoadingForNotFound';
+
+export default function NotFoundContent({ className }: Props): JSX.Element {
+  return (
+    <Suspense fallback={<LoadingForNotFound className={className} />}>
+      <NotFoundWithTimeout className={className} />
+    </Suspense>
+  );
+}