diff --git a/playground/src/components/loginCard/index.module.scss b/playground/src/components/loginCard/index.module.scss
index 2c3ab9aa..de669275 100644
--- a/playground/src/components/loginCard/index.module.scss
+++ b/playground/src/components/loginCard/index.module.scss
@@ -96,6 +96,10 @@
           line-height: 24px;
         }
       }
+
+      .btnLoadingBg {
+        background: var(--primary-500-base, #434343);
+      }
     }
 
     .section+.section {
@@ -111,3 +115,21 @@
 
   }
 }
+
+
+.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; }
+}
\ No newline at end of file
diff --git a/playground/src/components/loginCard/index.tsx b/playground/src/components/loginCard/index.tsx
index af5bad27..e5f5b880 100644
--- a/playground/src/components/loginCard/index.tsx
+++ b/playground/src/components/loginCard/index.tsx
@@ -3,7 +3,7 @@
 import packageData from "../../../package.json"
 import { useRouter } from 'next/navigation'
 import { message } from "antd"
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { GithubIcon, LogoIcon } from "../icons"
 import { GITHUB_URL, getRandomUserId, useAppDispatch, getRandomChannel } from "@/common"
 import { setOptions } from "@/store/reducers/global"
@@ -16,6 +16,7 @@ const LoginCard = () => {
   const dispatch = useAppDispatch()
   const router = useRouter()
   const [userName, setUserName] = useState("")
+  const [isLoadingSuccess, setIsLoadingSuccess] = useState(false);
 
   const onClickGithub = () => {
     if (typeof window !== "undefined") {
@@ -29,7 +30,18 @@ const LoginCard = () => {
     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) {
@@ -63,8 +75,10 @@ const LoginCard = () => {
         <input placeholder="User Name" value={userName} onChange={onUserNameChange} ></input>
       </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}>
+          <div className={styles.btnText}>
+            {isLoadingSuccess ? "Join" : <div><span>Loading</span><span className={styles.dotting}></span></div>}
+          </div>
         </div>
       </div>
       <div className={styles.version}>Version {version}</div>