feat: lazy-loading and standards compliance

src/components/FlickerList.tsx

@@ -136,7 +136,7 @@ const FlickerList: React.FC<{
 							</Flicker>
 						</li>
 					)),
-					<li>·</li>,
+					index => <li key={index}>·</li>,
 				),
 			]}
 		</ul>

src/index.tsx

@@ -1,20 +1,16 @@
-import React from "react";
-
+import React, { lazy, Suspense } from "react";
 import { createRoot } from "react-dom/client";
-
 import useLocation from "wouter/use-location";
 
-import Home from "./pages/main/Home";
-import Exp from "./pages/main/Exp";
-import Projects from "./pages/main/Projects";
-import Contact from "./pages/main/Contact";
-import Live from "./pages/main/Live";
-
-import NotFound from "./pages/main/404";
-import BlogHome from "./pages/blog/Home";
-import { BlogPost } from "./pages/blog/components/BlogContent";
 import { normalise } from "./util";
 
+const Home = lazy(() => import("./pages/main/Home"));
+const Exp = lazy(() => import("./pages/main/Exp"));
+const Projects = lazy(() => import("./pages/main/Projects"));
+const Contact = lazy(() => import("./pages/main/Contact"));
+
+const NotFound = lazy(() => import("./pages/main/404"));
+
 function App() {
 	const [location, navigate] = useLocation();
 
@@ -30,14 +26,16 @@ function App() {
 	if (normalised.startsWith("/experience/")) return <Exp />;
 	if (normalised === "/projects") return <Projects />;
 	if (normalised === "/contact") return <Contact />;
-	if (normalised === "/live") return <Live />;
-	if (normalised === "/blog") return <BlogHome />;
-	if (location.startsWith("/blog")) return <BlogPost />;
+	// if (normalised === "/live") return <Live />;
+	// if (normalised === "/blog") return <BlogHome />;
+	// if (location.startsWith("/blog")) return <BlogPost />;
 	return <NotFound />;
 }
 
 createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
+		<Suspense>
 			<App />
+		</Suspense>
 	</React.StrictMode>,
 );

src/pages/main/Home.tsx

@@ -17,7 +17,6 @@ const Home: React.FC = () => {
 		<Container>
 			<section>
 				<h1>MKRhere</h1>
-				<p>
 				<FlickerList
 					list={[
 						{
@@ -37,7 +36,6 @@ const Home: React.FC = () => {
 						},
 					]}
 				/>
-				</p>
 			</section>
 			<section
 				className={cx(

src/util/index.ts

@@ -3,12 +3,20 @@ import useLocation from "wouter/use-location";
 
 export const sleep = (t: number) => new Promise(r => setTimeout(r, t));
 
-export function* intersperse<T, U>(xs: T[], delim: U): Generator<T | U> {
+export function* intersperse<T, U>(
+	xs: T[],
+	delim: (index: number) => U,
+): Generator<T | U> {
 	let first = true;
+	let i = 0;
 	for (const x of xs) {
-		if (!first) yield delim;
+		if (!first) {
+			yield delim(i);
+			i++;
+		}
 		first = false;
 		yield x;
+		i++;
 	}
 }