add: add loading status to test latency button

3 files changed, 56 insertions, 5 deletions

diff --git a/src/components/Proxies.js b/src/components/Proxies.js
index 23b1bd8..593161a 100644
--- a/src/components/Proxies.js
+++ b/src/components/Proxies.js
@@ -28,10 +28,16 @@ const { useState, useEffect, useCallback, useRef } = React;
 
 function Proxies({ dispatch, groupNames, delay, proxyProviders, apiConfig }) {
   const refFetchedTimestamp = useRef({});
-  const requestDelayAllFn = useCallback(
-    () => dispatch(requestDelayAll(apiConfig)),
-    [apiConfig, dispatch]
-  );
+  const [isTestingLatency, setIsTestingLatency] = useState(false);
+  const requestDelayAllFn = useCallback(() => {
+    if (isTestingLatency) return;
+
+    setIsTestingLatency(true);
+    dispatch(requestDelayAll(apiConfig)).then(
+      () => setIsTestingLatency(false),
+      () => setIsTestingLatency(false)
+    );
+  }, [apiConfig, dispatch, isTestingLatency]);
 
   const fetchProxiesHooked = useCallback(() => {
     refFetchedTimestamp.current.startAt = new Date();
@@ -92,7 +98,7 @@ function Proxies({ dispatch, groupNames, delay, proxyProviders, apiConfig }) {
       <ProxyProviderList items={proxyProviders} />
       <div style={{ height: 60 }} />
       <Fab
-        icon={<Zap width={16} />}
+        icon={isTestingLatency ? <ColorZap /> : <Zap width={16} height={16} />}
         onClick={requestDelayAllFn}
         text="Test Latency"
         position={fabPosition}
@@ -101,6 +107,23 @@ function Proxies({ dispatch, groupNames, delay, proxyProviders, apiConfig }) {
   );
 }
 
+function ColorZap() {
+  return (
+    <div
+      className={s0.spining}
+      style={{
+        width: 48,
+        height: 48,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Zap width={16} height={16} />
+    </div>
+  );
+}
+
 const mapState = (s) => ({
   apiConfig: getClashAPIConfig(s),
   groupNames: getProxyGroupNames(s),
diff --git a/src/components/Proxies.module.css b/src/components/Proxies.module.css
index 2a72f51..2c702e7 100644
--- a/src/components/Proxies.module.css
+++ b/src/components/Proxies.module.css
@@ -14,3 +14,30 @@
     padding: 10px 40px;
   }
 }
+
+.spining {
+  position: relative;
+  border-radius: 50%;
+  background: linear-gradient(60deg, #e66465, #9198e5);
+}
+.spining:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: 2px solid transparent;
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: spining_keyframes 1s linear infinite;
+}
+
+@keyframes spining_keyframes {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/shared/rtf.css b/src/components/shared/rtf.css
index d0e28f9..1e97412 100644
--- a/src/components/shared/rtf.css
+++ b/src/components/shared/rtf.css
@@ -27,6 +27,7 @@
   margin: 0;
   padding: 0;
 }
+
 .rtf.open .rtf--ab__c:hover > span {
   transition: ease-in-out opacity 0.2s;
   opacity: 0.9;