fix: adding the loading state for the Join btn on the landing page. (#…

…315) * Adding a loading state of Join btn
TEN-framework · Oct 10, 2024 · d4360af · d4360af
1 parent 2abbcb0
commit d4360af
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 25 deletions.
diff --git a/demo/src/app/layout.tsx b/demo/src/app/layout.tsx
@@ -1,10 +1,8 @@
 import { ConfigProvider } from "antd"
 import { StoreProvider } from "@/store";
 import type { Metadata, Viewport } from "next";
-
 import './global.css'
 
-
 export const metadata: Metadata = {
   title: "TEN Agent",
   description: "The World's First Multimodal AI Agent with the OpenAI Realtime API (Beta)",
@@ -23,9 +21,6 @@ export const viewport: Viewport = {
   viewportFit: "cover",
 }
 
-
-
-
 export default function RootLayout({
   children,
 }: Readonly<{

diff --git a/demo/src/app/page.tsx b/demo/src/app/page.tsx
@@ -5,10 +5,10 @@ export default function Login() {
 
   return (
     <main className={styles.login}>
-      <div className={styles.starts}></div>
-      <div className={styles.starts2}></div>
-      <div className={styles.starts3}></div>
-      <LoginCard></LoginCard>
+      <div className={styles.starts} />
+      <div className={styles.starts2} />
+      <div className={styles.starts3} />
+      <LoginCard />
     </main>
   );
 }
diff --git a/demo/src/components/loginCard/index.module.scss b/demo/src/components/loginCard/index.module.scss
@@ -94,6 +94,16 @@
           font-weight: 500;
           line-height: 24px;
         }
+
+        .btnLoadingBg {
+          background: var(--primary-500-base, #434343);
+        }
+      }
+
+      &.btnDisabled {
+        background-color: #808080; // Gray color
+        cursor: not-allowed;
+        opacity: 0.7; // Optional: reduces opacity to further indicate disabled state
       }
     }
 
@@ -109,4 +119,25 @@
     }
 
   }
+  .success {
+    background: var(--primary-500-base, #434343);
+  }
+
+  .dotting { 
+    display: inline-block; width: 10px; min-height: 2px;
+    padding-right: 2px;
+    border-left: 2px solid currentColor; border-right: 2px solid currentColor;
+    background-color: currentColor; background-clip: content-box;
+    box-sizing: border-box;
+    -webkit-animation: dot 1.5s infinite step-start both;
+    animation: dot 1.5s infinite step-start both;
+  }
+  .dotting::before { content: ''; }
+  :root .dotting { margin-left: 2px; padding-left: 2px; }
+
+  @keyframes dot {
+  25% { border-color: transparent; background-color: transparent; }
+  50% { border-right-color: transparent; background-color: transparent; }
+  75% { border-right-color: transparent; }
+  }
 }
diff --git a/demo/src/components/loginCard/index.tsx b/demo/src/components/loginCard/index.tsx
@@ -1,39 +1,52 @@
 "use client"
 
-import packageData from "../../../package.json"
+import type React from 'react'; 
 import { useRouter } from 'next/navigation'
 import { message } from "antd"
-import { useState } from "react"
-import { GithubIcon, LogoIcon } from "../icons"
+import { useState, useEffect } from "react"
 import { GITHUB_URL, getRandomUserId, useAppDispatch, getRandomChannel } from "@/common"
 import { setOptions } from "@/store/reducers/global"
 import styles from "./index.module.scss"
 
+import { GithubIcon } from "../icons"
+import packageData from "../../../package.json"
 
 const { version } = packageData
 
 const LoginCard = () => {
   const dispatch = useAppDispatch()
   const router = useRouter()
   const [userName, setUserName] = useState("")
+  const [isLoadingSuccess, setIsLoadingSuccess] = useState(false);
 
   const onClickGithub = () => {
     if (typeof window !== "undefined") {
       window.open(GITHUB_URL, "_blank")
     }
   }
 
-  const onUserNameChange = (e: any) => {
+  const onUserNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let value = e.target.value
     value = value.replace(/\s/g, "");
     setUserName(value)
   }
 
+  useEffect(() => {
+    const onPageLoad = () => {
+      setIsLoadingSuccess(true);
+    };
 
+    if (document.readyState === 'complete') {
+      onPageLoad();
+    } else {
+      window.addEventListener('load', onPageLoad, false);
+      return () => window.removeEventListener('load', onPageLoad);
+    }
+  }, []);
 
   const onClickJoin = () => {
     if (!userName) {
-      message.error("please input user name")
+      message.error("please enter a user name")
       return
     }
     const userId = getRandomUserId()
@@ -45,11 +58,20 @@ const LoginCard = () => {
     router.push("/home")
   }
 
-
   return <div className={styles.card}>
     <section className={styles.top}>
-      <span className={styles.github} onClick={onClickGithub}>
-        <GithubIcon></GithubIcon>
+      <span 
+        className={styles.github} 
+        onClick={onClickGithub}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            onClickGithub();
+          }
+        }}
+        role="button"
+        tabIndex={0}
+      >
+        <GithubIcon />
         <span className={styles.text}>GitHub</span>
       </span>
     </section>
@@ -59,19 +81,28 @@ const LoginCard = () => {
         <span className={styles.text}>The World's First Multimodal AI Agent with the OpenAI Realtime API (Beta)</span>
       </div>
       <div className={styles.section}>
-        <input placeholder="User Name" value={userName} onChange={onUserNameChange} ></input>
+        <input placeholder="User Name" value={userName} onChange={onUserNameChange} />
       </div>
       <div className={styles.section}>
-        <div className={styles.btn} onClick={onClickJoin}>
-          <span className={styles.btnText}>Join</span>
+        <div 
+          className={`${styles.btn} ${!isLoadingSuccess && styles.btnLoadingBg}`} 
+          onClick={onClickJoin}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              onClickJoin();
+            }
+          }}
+          role="button"
+          tabIndex={0}
+        >
+          <div className={styles.btnText}>
+            {isLoadingSuccess ? "Join" : <div><span>Loading</span><span className={styles.dotting} /></div>}
+          </div>
         </div>
       </div>
       <div className={styles.version}>Version {version}</div>
     </section >
   </div >
-
-
-  return
 }
 
 export default LoginCard
diff --git a/demo/src/platform/pc/description/index.tsx b/demo/src/platform/pc/description/index.tsx
@@ -88,10 +88,10 @@ const Description = () => {
   return <div className={styles.description}>
     <span className={styles.title}>Description</span>
     <span className={styles.text}>The World's First Multimodal AI Agent with the OpenAI Realtime API (Beta)</span>
-    <span className={`${styles.btnConnect} ${agentConnected ? styles.disconnect : ''}`} onClick={onClickConnect}>
+    <span className={`${styles.btnConnect} ${agentConnected ? styles.disconnect : ''}`} onClick={onClickConnect} onKeyUp={onClickConnect} onKeyDown={onClickConnect} onKeyPress={onClickConnect}>
       <span className={`${styles.btnText} ${agentConnected ? styles.disconnect : ''}`}>
         {!agentConnected ? "Connect" : "Disconnect"}
-        {loading ? <LoadingOutlined className={styles.loading}></LoadingOutlined> : null}
+        {loading ? <LoadingOutlined className={styles.loading} /> : null}
       </span>
     </span>
   </div>