From 877a641ae1dd5621fbf38c1c8b9a1010e5cd4356 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Wed, 18 Jan 2023 10:36:31 +0700
Subject: [PATCH] loading icon on click, disabled if textarea empty

---
 .../tts/tts_model_list/TtsModelListPage.tsx   | 47 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx
index ea6076ea60..85675b8df0 100644
--- a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx
@@ -132,6 +132,23 @@ interface Props {
 }
 
 function TtsModelListPage(props: Props) {
+  //Loading spinning icon
+  const [loading, setLoading] = useState(false);
+
+  const handleLoading = () => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+    }, 1000);
+  };
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setLoading(false);
+    }, 1000);
+    return () => clearTimeout(timeout);
+  }, []);
+
   let {
     setTtsModels,
     setAllTtsCategories,
@@ -392,6 +409,11 @@ function TtsModelListPage(props: Props) {
 
   // NB: If the text is too long, don't allow submission
   let remainingCharactersButtonDisabled = props.textBuffer.trim().length > 1024;
+  let noTextInputButtonDisabled = props.textBuffer.trim() === "";
+
+  const speakButtonClass = loading
+    ? "btn btn-primary w-100 disabled"
+    : "btn btn-primary w-100";
 
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>
@@ -634,18 +656,26 @@ function TtsModelListPage(props: Props) {
                       ></textarea>
                       <div className="d-flex gap-3">
                         <button
-                          className="btn btn-primary w-100"
-                          disabled={remainingCharactersButtonDisabled}
+                          className={speakButtonClass}
+                          disabled={
+                            remainingCharactersButtonDisabled ||
+                            noTextInputButtonDisabled
+                          }
+                          onClick={handleLoading}
+                          type="submit"
                         >
                           <FontAwesomeIcon
                             icon={faVolumeHigh}
                             className="me-2"
                           />
                           {t("tts.TtsModelListPage.form.buttons.speak")}
+
+                          {loading && <LoadingIcon />}
                         </button>
                         <button
                           className="btn btn-destructive w-25"
                           onClick={handleClearClick}
+                          disabled={noTextInputButtonDisabled}
                         >
                           <FontAwesomeIcon
                             icon={faDeleteLeft}
@@ -712,4 +742,17 @@ function TtsModelListPage(props: Props) {
   );
 }
 
+const LoadingIcon: React.FC = () => {
+  return (
+    <>
+      <span
+        className="spinner-border spinner-border-sm ms-3"
+        role="status"
+        aria-hidden="true"
+      ></span>
+      <span className="visually-hidden">Loading...</span>
+    </>
+  );
+};
+
 export { TtsModelListPage };