feat: load flag with loading text

typewriter/src/App.tsx

@@ -1,9 +1,23 @@
-import React from 'react';
+import { useEffect, useState } from "react";
+import { fetchBodyText } from "./api/fetchBodyText";
 
 function App() {
+  const [bodyText, setBodyText] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function load() {
+      setLoading(true);
+      const text = await fetchBodyText();
+      setBodyText(text);
+      setLoading(false);
+    }
+    load();
+  }, []);
+
   return (
     <div className="App">
-      Hello World!
+      {loading ? <p>Loading...</p> : <p>{bodyText}</p>}
     </div>
   );
 }

typewriter/src/api/fetchBodyText.ts

@@ -0,0 +1,19 @@
+const url = "https://wgg522pwivhvi5gqsn675gth3q0otdja.lambda-url.us-east-1.on.aws/6f7665";
+
+export async function fetchBodyText(): Promise<string> {
+  try {
+    const response = await fetch(url);
+    const html = await response.text();
+
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+
+    const body = doc.body;
+    const text = body?.textContent?.trim();
+
+    return text ?? "";
+  } catch (error) {
+    console.error("Error fetching or parsing HTML:", error);
+    return "";
+  }
+}