From 4e41f3df3f310fb986bf900ace105ab7da03c654 Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Tue, 11 Jun 2024 08:29:06 +0530
Subject: [PATCH] feat: lazy-loading and standards compliance

---
 src/components/FlickerList.tsx |  2 +-
 src/index.tsx                  | 30 ++++++++++++++----------------
 src/pages/main/Home.tsx        | 40 +++++++++++++++++++---------------------
 src/util/index.ts              | 12 ++++++++++--
 4 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/src/components/FlickerList.tsx b/src/components/FlickerList.tsx
index d7218c1..326b6a2 100644
--- a/src/components/FlickerList.tsx
+++ b/src/components/FlickerList.tsx
@@ -136,7 +136,7 @@ const FlickerList: React.FC<{
 							</Flicker>
 						</li>
 					)),
-					<li>·</li>,
+					index => <li key={index}>·</li>,
 				),
 			]}
 		</ul>
diff --git a/src/index.tsx b/src/index.tsx
index 6f15d3b..92fa0b2 100644
--- a/src/index.tsx
+++ b/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>
-		<App />
+		<Suspense>
+			<App />
+		</Suspense>
 	</React.StrictMode>,
 );
diff --git a/src/pages/main/Home.tsx b/src/pages/main/Home.tsx
index 3d28eb1..21b68bc 100644
--- a/src/pages/main/Home.tsx
+++ b/src/pages/main/Home.tsx
@@ -17,27 +17,25 @@ const Home: React.FC = () => {
 		<Container>
 			<section>
 				<h1>MKRhere</h1>
-				<p>
-					<FlickerList
-						list={[
-							{
-								text: "Designer",
-								description:
-									"Graphic design is my passion 🤓 I have plenty of experience with Figma and Adobe Suite tools (especially Photoshop and InDesign)",
-							},
-							{
-								text: "Developer",
-								description:
-									"🧑🏻‍💻 I started developing websites in 2015, and in 2017 I joined The Devs Network, catapulting my growth as a full-time developer",
-							},
-							{
-								text: "Architect",
-								description:
-									"I have a formal degree in architecture! I'm an architect in both construction and software 😉",
-							},
-						]}
-					/>
-				</p>
+				<FlickerList
+					list={[
+						{
+							text: "Designer",
+							description:
+								"Graphic design is my passion 🤓 I have plenty of experience with Figma and Adobe Suite tools (especially Photoshop and InDesign)",
+						},
+						{
+							text: "Developer",
+							description:
+								"🧑🏻‍💻 I started developing websites in 2015, and in 2017 I joined The Devs Network, catapulting my growth as a full-time developer",
+						},
+						{
+							text: "Architect",
+							description:
+								"I have a formal degree in architecture! I'm an architect in both construction and software 😉",
+						},
+					]}
+				/>
 			</section>
 			<section
 				className={cx(
diff --git a/src/util/index.ts b/src/util/index.ts
index e31e8b3..44169cc 100644
--- a/src/util/index.ts
+++ b/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++;
 	}
 }