[feat] loading state using init watch

src/components/cstb/Prepare.tsx

@@ -30,10 +30,9 @@ export function Prepare() {
   const steam = useSteamStore()
   const router = useRouter()
   const [loading, setLoading] = useState(true)
-  const [checking, setChecking] = useState(false)
+  const [inited, setInited] = useState(false)
   const [, setSteamDir] = useState(steam.state.steamDir)
   const [, setCs2Dir] = useState(steam.state.cs2Dir)
-  const [inited, setInited] = useState(false)
 
   useEffect(() => {
     const initValues = async () => {
@@ -158,7 +157,13 @@ export function Prepare() {
       </section>
 
       <section className="flex justify-center w-full gap-3 mt-6">
-        <Button onPress={() => void autoGetPaths()} variant="ghost" color="default" size="sm">
+        <Button
+          onPress={() => void autoGetPaths()}
+          variant="ghost"
+          color="default"
+          size="sm"
+          className="w-24"
+        >
           自动获取
         </Button>
         <Button
@@ -166,7 +171,8 @@ export function Prepare() {
           variant="solid"
           color="primary"
           size="sm"
-          isLoading={checking}
+          className="w-24"
+          isLoading={steam.state.steamDirChecking || steam.state.cs2DirChecking}
           isDisabled={!inited}
         >
           进入

src/store/steam.ts

@@ -10,6 +10,10 @@ import { dir } from "console"
 const defaultValue = {
   steamDir: "C:\\Program Files (x86)\\Steam",
   cs2Dir: "",
+  steamDirValid: false,
+  cs2DirValid: false,
+  steamDirChecking: false,
+  cs2DirChecking: false,
   users: [
     {
       steamID64: "76561198052315353",
@@ -20,8 +24,6 @@ const defaultValue = {
       avatar: "",
     },
   ] as SteamUser[],
-  steamDirValid: false,
-  cs2DirValid: false,
 }
 
 export const steamStore = store(
@@ -64,16 +66,32 @@ const setCs2DirValid = (valid: boolean) => {
   steamStore.state.cs2DirValid = valid
 }
 
+const SetSteamDirChecking = (checking: boolean) => {
+  steamStore.state.steamDirChecking = checking
+}
+
+const SetCs2DirChecking = (checking: boolean) => {
+  steamStore.state.cs2DirChecking = checking
+}
+
 const checkSteamDirValid = async () => {
+  SetSteamDirChecking(true)
   const pathExist = await invoke<boolean>("check_path", { path: steamStore.state.steamDir })
   console.log("steamDir", steamStore.state.steamDir, "pathExist", pathExist)
   setSteamDirValid(pathExist)
+  setTimeout(() => {
+    SetSteamDirChecking(false)
+  }, 500)
 }
 
 const checkCs2DirValid = async () => {
+  SetCs2DirChecking(true)
   const pathExist = await invoke<boolean>("check_path", { path: steamStore.state.cs2Dir })
   console.log("cs2Dir", steamStore.state.cs2Dir, "pathExist", pathExist)
   setCs2DirValid(pathExist)
+  setTimeout(() => {
+    SetCs2DirChecking(false)
+  }, 500)
 }
 
 const currentUser = () => {
@@ -86,4 +104,6 @@ const resetSteamStore = () => {
   setUsers(defaultValue.users)
   setSteamDirValid(defaultValue.steamDirValid)
   setCs2DirValid(defaultValue.cs2DirValid)
+  SetSteamDirChecking(defaultValue.steamDirChecking)
+  SetCs2DirChecking(defaultValue.cs2DirChecking)
 }