update interface visuals

.gitignore

@@ -12,6 +12,9 @@ dist
 dist-ssr
 *.local
 output
+tsconfig.app.tsbuildinfo
+tsconfig.node.tsbuildinfo
+
 
 # Editor directories and files
 .vscode/*

src/Home/index.tsx

@@ -1,4 +1,4 @@
-import { createSignal } from 'solid-js'
+import { createSignal, useTransition } from 'solid-js'
 import './style.css'
 
 
@@ -9,11 +9,14 @@ interface ITranslation {
 }
 
 export default function App() { 
+    const [ isPending, start ] = useTransition()
     const [ translation, setTranslation ] = createSignal<ITranslation | null>(null)
+    const placeholder_text = () => isPending()? 'Translating...' : 'Translation'
     let textarea: HTMLTextAreaElement | undefined
 
     async function fetchData(text: string) { 
       if (text === translation()?.translatedText || !text) { return }
+      if (translation()) { setTranslation(null) }
       const response = await fetch(`/api/translate?text=${text}`, { method: "POST" }).then(response => { 
           if (response.status === 200) { return response.json() }
   
@@ -26,12 +29,14 @@ export default function App() {
     return (
       <main class="w-screen my-24 mx-5">
         <div class="w-1/2 p-3 flex justify-end">
-          <button onclick={() => fetchData(textarea?.value as string)}>Translate</button>
+          <button onclick={() => { 
+              start(() => fetchData(textarea?.value as string))
+          } }>Translate</button>
         </div>
         <section class="flex">
             {/* amber-500 */}
             <textarea class="h-64 p-2 w-1/2 bg-zinc-700" placeholder="Insert input text..." ref={textarea} />
-            <textarea class="h-64 p-7 w-1/2 text-2xl" placeholder='Translation' readonly value={translation()?.translatedText} />
+            <textarea class="h-64 p-7 w-1/2 text-2xl" placeholder={placeholder_text()} readonly value={translation()?.translatedText ?? ''} />
         </section>
       </main>
     )