add loading on single mode

src/ui/Match/index.tsx

 import {
   EditOutlined,
+  LoadingOutlined,
   PlayCircleOutlined,
   SettingFilled,
 } from "@ant-design/icons";
@@ -28,11 +29,13 @@ export const Component: React.FC = () => {
   const [deck, setDeck] = useState<IDeck>(JSON.parse(JSON.stringify(decks[0])));
   const { user } = useSnapshot(accountStore);
   const { joined } = useSnapshot(roomStore);
+  const [singleLoading, setSingleLoading] = useState(false); // 单人模式的loading状态
   const navigate = useNavigate();
 
   useEffect(() => {
     // 人机对战跳转
     if (joined) {
+      setSingleLoading(false);
       navigate(`/waitroom`);
     }
   }, [joined]);
@@ -100,9 +103,15 @@ export const Component: React.FC = () => {
             <Mode
               title="单人模式"
               desc="开启与AI的决斗，验证自己的卡组，或者只是打发时间。"
-              icon={<IconFont type="icon-chip" size={26} />}
+              icon={
+                singleLoading ? (
+                  <LoadingOutlined />
+                ) : (
+                  <IconFont type="icon-chip" size={26} />
+                )
+              }
               onClick={async () => {
-                // TODO: 有时间可以做一个Loading
+                setSingleLoading(true);
 
                 // 初始化，然后等待后端通知成功加入房间后跳转页面
                 await init({