From 43cd8f06dc50b75d38bf067577eb391f3d7a5f2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B4=9D=E5=90=89=E5=A1=94=E5=A4=A7=E7=8E=8B?=
 <cyfyifanchen@gmail.com>
Date: Thu, 10 Oct 2024 11:03:16 +0800
Subject: [PATCH] fix: adding the loading state for the Join btn on the landing
 page.

* Adding a loading state of Join btn
---
 demo/src/app/layout.tsx                       |  5 --
 demo/src/app/page.tsx                         |  8 +--
 .../components/loginCard/index.module.scss    | 31 ++++++++++
 demo/src/components/loginCard/index.tsx       | 59 ++++++++++++++-----
 demo/src/platform/pc/description/index.tsx    |  4 +-
 5 files changed, 82 insertions(+), 25 deletions(-)

diff --git a/demo/src/app/layout.tsx b/demo/src/app/layout.tsx
index f4587661..0bbfbeb8 100644
--- 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
index 1bdcdeda..771958bf 100644
--- 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
index 20f49963..10d807e1 100644
--- 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
index 95df81b6..457511a5 100644
--- a/demo/src/components/loginCard/index.tsx
+++ b/demo/src/components/loginCard/index.tsx
@@ -1,14 +1,15 @@
 "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
 
@@ -16,6 +17,7 @@ const LoginCard = () => {
   const dispatch = useAppDispatch()
   const router = useRouter()
   const [userName, setUserName] = useState("")
+  const [isLoadingSuccess, setIsLoadingSuccess] = useState(false);
 
   const onClickGithub = () => {
     if (typeof window !== "undefined") {
@@ -23,17 +25,28 @@ const LoginCard = () => {
     }
   }
 
-  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
index 45633da7..b95f4658 100644
--- 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>