From de8c0cab8d4f5f930b59088a2e213ab388ef7762 Mon Sep 17 00:00:00 2001
From: Giovani Rodriguez <giovani@boldquest.net>
Date: Tue, 15 Jul 2025 07:08:06 +0000
Subject: [PATCH] feat: render chars in list items

---
 typewriter/src/App.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/typewriter/src/App.tsx b/typewriter/src/App.tsx
index 15bc454..d3faa4a 100644
--- a/typewriter/src/App.tsx
+++ b/typewriter/src/App.tsx
@@ -1,19 +1,24 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { fetchBodyText } from "./api/fetchBodyText";
 
 function App() {
+  const hasLoaded = useRef(false);
   const [bodyText, setBodyText] = useState("");
   const [loading, setLoading] = useState(true);
   const [visibleText, setVisibleText] = useState("");
 
   // Call to load flag
   useEffect(() => {
+    if (hasLoaded.current) return;
+    hasLoaded.current = true;
+
     async function load() {
       setLoading(true);
       const text = await fetchBodyText();
       setBodyText(text);
       setLoading(false);
     }
+
     load();
   }, []);
 
@@ -38,7 +43,15 @@ function App() {
 
   return (
     <div className="App">
-      {loading ? <p>Loading...</p> : <p>{visibleText}</p>}
+      {loading ? (
+        <p>Loading...</p> 
+      ) : (
+        <ul>
+          {visibleText.split("").map((char, index) => (
+            <li key={index}>{char}</li>
+          ))}
+        </ul>
+      )}
     </div>
   );
 }