feat: render chars in list items

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>
   );
 }