Snapshot

frontend/.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+/public/*.js*

frontend/public/index.css

@@ -91,15 +91,10 @@ label.missing > input {
   border: 1px solid red;
 }
 
-label > textarea {
+textarea {
   flex-basis: 100%;
 }
 
-#api-token > button {
-  width: 5rem;
-  padding: 0.2rem;
-}
-
 details > summary {
   text-align: left;
 }
@@ -135,3 +130,42 @@ span.token-chip {
 span.token-chip.flagged {
   background-color: #dd1111;
 }
+
+.result-container {
+  position: relative;
+}
+
+.result-container textarea {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.spinner-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+}
+
+.spinner {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

frontend/src/components/TokenChip.tsx

@@ -0,0 +1,10 @@
+import React from "react"
+
+export const TokenChip = ({ token, logprob, threshold }: { token: string, logprob: number, threshold: number }) => {
+  return <span
+    title={logprob.toFixed(2)}
+    className={`token-chip ${logprob < threshold ? "flagged" : ""}`}
+  >
+    {token}
+  </span>
+}

frontend/src/components/app.tsx

@@ -4,15 +4,23 @@ import { TokenChip } from "./TokenChip"
 interface Word {
   text: string
   logprob: number
+  replacements: string[]
 }
 
 async function checkText(text: string): Promise<Word[]> {
   await new Promise(resolve => setTimeout(resolve, 3000));
 
   const words = text.split(/\b/)
-  return words.map(word => ({ text: word, logprob: -word.length }))
+  return words.map(word => ({ text: word, logprob: -word.length, replacements: word.length < 4 ? [] : ["foo", "bar"] }))
 }
 
+// Add a new Spinner component
+const Spinner = () => (
+  <div className="spinner-overlay">
+    <div className="spinner"></div>
+  </div>
+);
+
 export default function App() {
   const [threshold, setThreshold] = useState(-5.0)
   const [context, setContext] = useState("")
@@ -21,12 +29,18 @@ export default function App() {
   const [text, setText] = useState("")
   const [mode, setMode] = useState<"edit" | "check">("edit")
   const [words, setWords] = useState<Word[]>([])
+  const [isLoading, setIsLoading] = useState(false)
 
   const toggleMode = async () => {
     if (mode === "edit") {
-      const checkedWords = await checkText(text)
-      setWords(checkedWords)
-      setMode("check")
+      setIsLoading(true)
+      try {
+        const checkedWords = await checkText(text)
+        setWords(checkedWords)
+      } finally {
+        setMode("check")
+        setIsLoading(false)
+      }
     } else {
       setMode("edit")
     }
@@ -35,18 +49,26 @@ export default function App() {
   let result
 
   if (mode === "edit") {
-    result = <textarea value={text} onChange={e => setText(e.target.value)} />
+    result = (
+      <div className="result-container">
+        {isLoading && <Spinner />}
+        <textarea value={text} onChange={e => setText(e.target.value)} />
+      </div>
+    )
   } else {
     result = (
-      <div className="result">
-        {words.map((word, index) => (
-          <TokenChip
-            key={index}
-            token={word.text}
-            logprob={word.logprob}
-            threshold={threshold}
-          />
-        ))}
+      <div className="result-container">
+        {isLoading && <Spinner />}
+        <div className="result">
+          {words.map((word, index) => (
+            <TokenChip
+              key={index}
+              token={word.text}
+              logprob={word.logprob}
+              threshold={threshold}
+            />
+          ))}
+        </div>
       </div>
     )
   }