From a2cf26e7ed35744f60b012d28f9dd7a524652e27 Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Sun, 4 Sep 2022 23:53:48 +0800
Subject: [PATCH] feat: add proxy item check loading

---
 src/components/base/base-loading.tsx | 50 ++++++++++++++++
 src/components/proxy/proxy-item.tsx  | 85 ++++++++++++++++------------
 2 files changed, 99 insertions(+), 36 deletions(-)
 create mode 100644 src/components/base/base-loading.tsx

diff --git a/src/components/base/base-loading.tsx b/src/components/base/base-loading.tsx
new file mode 100644
index 0000000..a1352d4
--- /dev/null
+++ b/src/components/base/base-loading.tsx
@@ -0,0 +1,50 @@
+import { styled } from "@mui/material";
+
+const Loading = styled("div")`
+  position: relative;
+  display: flex;
+  height: 100%;
+  min-height: 18px;
+  box-sizing: border-box;
+  align-items: center;
+
+  & > div {
+    box-sizing: border-box;
+    width: 6px;
+    height: 6px;
+    margin: 2px;
+    border-radius: 100%;
+    animation: loading 0.7s -0.15s infinite linear;
+  }
+
+  & > div:nth-child(2n-1) {
+    animation-delay: -0.5s;
+  }
+
+  @keyframes loading {
+    50% {
+      opacity: 0.2;
+      transform: scale(0.75);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+`;
+
+const LoadingItem = styled("div")(({ theme }) => ({
+  background: theme.palette.text.secondary,
+}));
+
+const BaseLoading = () => {
+  return (
+    <Loading>
+      <LoadingItem />
+      <LoadingItem />
+      <LoadingItem />
+    </Loading>
+  );
+};
+
+export default BaseLoading;
diff --git a/src/components/proxy/proxy-item.tsx b/src/components/proxy/proxy-item.tsx
index 7c7c07d..b51681d 100644
--- a/src/components/proxy/proxy-item.tsx
+++ b/src/components/proxy/proxy-item.tsx
@@ -13,6 +13,7 @@ import {
   Theme,
 } from "@mui/material";
 import delayManager from "@/services/delay";
+import BaseLoading from "../base/base-loading";
 
 interface Props {
   groupName: string;
@@ -43,6 +44,9 @@ const TypeBox = styled(Box)(({ theme }) => ({
 
 const ProxyItem = (props: Props) => {
   const { groupName, proxy, selected, showType = true, sx, onClick } = props;
+
+  // -1/<=0 为 不显示
+  // -2 为 loading
   const [delay, setDelay] = useState(-1);
 
   useEffect(() => {
@@ -61,6 +65,7 @@ const ProxyItem = (props: Props) => {
   }, [proxy]);
 
   const onDelay = useLockFn(async () => {
+    setDelay(-2);
     return delayManager
       .checkDelay(proxy.name, groupName)
       .then((result) => setDelay(result))
@@ -81,14 +86,9 @@ const ProxyItem = (props: Props) => {
                 ? alpha(primary.main, 0.15)
                 : alpha(primary.main, 0.35);
             const color = mode === "light" ? primary.main : primary.light;
-
             const showDelay = delay > 0;
-            const showIcon = !showDelay && selected;
 
             return {
-              ".the-check": { display: "none" },
-              ".the-delay": { display: showDelay ? "block" : "none" },
-              ".the-icon": { display: showIcon ? "block" : "none" },
               "&:hover .the-check": { display: !showDelay ? "block" : "none" },
               "&:hover .the-delay": { display: showDelay ? "block" : "none" },
               "&:hover .the-icon": { display: "none" },
@@ -116,7 +116,14 @@ const ProxyItem = (props: Props) => {
         <ListItemIcon
           sx={{ justifyContent: "flex-end", color: "primary.main" }}
         >
-          {!proxy.provider && (
+          {delay === -2 && (
+            <Widget>
+              <BaseLoading />
+            </Widget>
+          )}
+
+          {!proxy.provider && delay !== -2 && (
+            // provider的节点不支持检测
             <Widget
               className="the-check"
               onClick={(e) => {
@@ -124,43 +131,49 @@ const ProxyItem = (props: Props) => {
                 e.stopPropagation();
                 onDelay();
               }}
-              sx={(theme) => ({
-                ":hover": { bgcolor: alpha(theme.palette.primary.main, 0.15) },
+              sx={({ palette }) => ({
+                display: "none", // hover才显示
+                ":hover": { bgcolor: alpha(palette.primary.main, 0.15) },
               })}
             >
               Check
             </Widget>
           )}
 
-          <Widget
-            className="the-delay"
-            onClick={(e) => {
-              if (proxy.provider) return;
+          {delay > 0 && (
+            // 显示延迟
+            <Widget
+              className="the-delay"
+              onClick={(e) => {
+                if (proxy.provider) return;
+                e.preventDefault();
+                e.stopPropagation();
+                onDelay();
+              }}
+              color={
+                delay > 500
+                  ? "error.main"
+                  : delay < 100
+                  ? "success.main"
+                  : "text.secondary"
+              }
+              sx={({ palette }) =>
+                !proxy.provider
+                  ? { ":hover": { bgcolor: alpha(palette.primary.main, 0.15) } }
+                  : {}
+              }
+            >
+              {delay > 1e5 ? "Error" : delay > 3000 ? "Timeout" : `${delay}ms`}
+            </Widget>
+          )}
 
-              e.preventDefault();
-              e.stopPropagation();
-              onDelay();
-            }}
-            color={
-              delay > 500
-                ? "error.main"
-                : delay < 100
-                ? "success.main"
-                : "text.secondary"
-            }
-            sx={({ palette }) =>
-              !proxy.provider
-                ? { ":hover": { bgcolor: alpha(palette.primary.main, 0.15) } }
-                : {}
-            }
-          >
-            {delay > 1e5 ? "Error" : delay > 3000 ? "Timeout" : `${delay}ms`}
-          </Widget>
-
-          <CheckCircleOutlineRounded
-            className="the-icon"
-            sx={{ fontSize: 16 }}
-          />
+          {delay !== -2 && delay <= 0 && selected && (
+            // 展示已选择的icon
+            <CheckCircleOutlineRounded
+              className="the-icon"
+              sx={{ fontSize: 16 }}
+            />
+          )}
         </ListItemIcon>
       </ListItemButton>
     </ListItem>