From 0e557991096d24e7a43d62c187ad870390ed2670 Mon Sep 17 00:00:00 2001
From: Gabe Yuan <yugang2002@gmail.com>
Date: Sat, 26 Aug 2023 14:42:50 +0800
Subject: [PATCH] fix sync test button

---
 src/views/Options/Rules.js       | 2 +-
 src/views/Options/SyncSetting.js | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/views/Options/Rules.js b/src/views/Options/Rules.js
index 009b16c..1f09fad 100644
--- a/src/views/Options/Rules.js
+++ b/src/views/Options/Rules.js
@@ -514,7 +514,7 @@ function UserRules() {
 
   return (
     <Stack spacing={3}>
-      <Stack direction="row" spacing={2} useFlexGap flexWrap="wrap">
+      <Stack direction="row" alignItems="center" spacing={2} useFlexGap flexWrap="wrap">
         <Button
           size="small"
           variant="contained"
diff --git a/src/views/Options/SyncSetting.js b/src/views/Options/SyncSetting.js
index 822e158..2fbddab 100644
--- a/src/views/Options/SyncSetting.js
+++ b/src/views/Options/SyncSetting.js
@@ -11,6 +11,8 @@ import { useMemo, useState } from "react";
 import { syncAll } from "../../libs/sync";
 import Button from "@mui/material/Button";
 import { useAlert } from "../../hooks/Alert";
+import SyncIcon from "@mui/icons-material/Sync";
+import CircularProgress from "@mui/material/CircularProgress";
 
 export default function SyncSetting() {
   const i18n = useI18n();
@@ -76,15 +78,17 @@ export default function SyncSetting() {
           onChange={handleChange}
         />
 
-        <Stack direction="row" spacing={2} useFlexGap flexWrap="wrap">
+        <Stack direction="row" alignItems="center" spacing={2} useFlexGap flexWrap="wrap">
           <Button
             size="small"
             variant="contained"
             disabled={!syncUrl || !syncKey || loading}
             onClick={handleSyncTest}
+            startIcon={<SyncIcon />}
           >
             {i18n("data_sync_test")}
           </Button>
+          {loading && <CircularProgress size={16} />}
         </Stack>
       </Stack>
     </Box>