add: add loading status to test latency button

.eslintrc.yml

@@ -29,8 +29,11 @@ rules:
     - error
     - functions: false
 
-  react-hooks/rules-of-hooks: error
+  # disable this temporarily since we have a lot of JS files
+  # and typescript-eslint runs against JS files too
+  '@typescript-eslint/explicit-module-boundary-types': off
 
+  react-hooks/rules-of-hooks: error
 #   quotes: ["error", "single"]
 #   strict: ["error", "never"]
 #   no-console: "warn"

package.json

@@ -76,13 +76,13 @@
     "@types/jest": "^25.2.1",
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
+    "@typescript-eslint/eslint-plugin": "^3.0.0",
+    "@typescript-eslint/parser": "^3.0.0",
     "autoprefixer": "^9.7.3",
     "babel-eslint": "10.x",
     "babel-loader": "^8.0.5",
     "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^5.1.1",
+    "copy-webpack-plugin": "^6.0.1",
     "css-loader": "^3.4.2",
     "cssnano": "^4.1.7",
     "eslint": "^7.0.0",
@@ -90,7 +90,7 @@
     "eslint-config-prettier": "^6.11.0",
     "eslint-config-react-app": "^5.2.1",
     "eslint-import-resolver-webpack": "^0.12.0",
-    "eslint-plugin-flowtype": "4.x",
+    "eslint-plugin-flowtype": "^5.1.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jest": "^23.10.0",
     "eslint-plugin-jsx-a11y": "6.x",
@@ -99,7 +99,7 @@
     "eslint-plugin-simple-import-sort": "^5.0.3",
     "file-loader": "^6.0.0",
     "fork-ts-checker-notifier-webpack-plugin": "^2.0.0",
-    "fork-ts-checker-webpack-plugin": "^4.1.3",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
     "html-webpack-plugin": "^4.3.0",
     "husky": "^4.0.0",
     "lint-staged": "^10.2.2",
@@ -115,7 +115,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^3.0.1",
-    "ts-loader": "^7.0.4",
+    "ts-loader": "^7.0.5",
     "typescript": "^3.8.3",
     "webpack": "^4.41.6",
     "webpack-bundle-analyzer": "^3.6.0",

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),

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);
+  }
+}

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;

webpack.config.js

@@ -68,7 +68,7 @@ const plugins = [
     title: 'TypeScript',
     excludeWarnings: false,
   }),
-  new CopyPlugin([{ from: 'assets/*', flatten: true }]),
+  new CopyPlugin({ patterns: [{ from: 'assets/*', flatten: true }] }),
   new CleanWebpackPlugin(),
   // chart.js requires moment
   // and we don't need locale stuff in moment