Merge pull request #3 from yunying1/feat-staring-status

feat: New staring status

Author: imyuanx

src/Components/Button/index.css

@@ -1,4 +1,5 @@
 .button {
+  position: relative;
   background-color: #16A34A;
   padding: 8px 10px;
   border-radius: 4px;
@@ -18,4 +19,14 @@
 .small {
   padding: 4px 10px;
   font-size: 10px;
+}
+
+.loading {
+  opacity: .65;
+  pointer-events: none;
+}
+
+.loading-icon {
+  position: absolute;
+  right: 10px;
 }

src/Components/Button/index.jsx

@@ -1,8 +1,49 @@
 import "./index.css";
 
 function Button(props) {
-  const { size, className, children, ...args } = props;
-  return <div className={`button ${size || ""} ${className}`} {...args}>{children}</div>;
+  const { size, className, children, isLoding, ...args } = props;
+  return (
+    <div
+      className={`button ${size || ""} ${className} ${isLoding && "loading"}`}
+      {...args}
+    >
+      {children}
+      {isLoding && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 24 24"
+          className="loading-icon"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-dasharray="15"
+            stroke-dashoffset="15"
+            stroke-linecap="round"
+            stroke-width="2"
+            d="M12 3C16.9706 3 21 7.02944 21 12"
+          >
+            <animate
+              fill="freeze"
+              attributeName="stroke-dashoffset"
+              dur="0.3s"
+              values="15;0"
+            />
+            <animateTransform
+              attributeName="transform"
+              dur="1s"
+              repeatCount="indefinite"
+              type="rotate"
+              values="0 12 12;360 12 12"
+            />
+          </path>
+        </svg>
+      )}
+    </div>
+  );
 }
 
 export default Button;

src/app.jsx

@@ -26,6 +26,7 @@ const App = () => {
   const [isStarted, setIsStarted] = useState(false);
   const [serviceUrl, setServiceUrl] = useState("");
   const [isShowTips, setIsShowTips] = useState(false);
+  const [isStaring, setIsStaring] = useState(false);
 
   /**
    * @desc start service
@@ -36,11 +37,13 @@ const App = () => {
       alert(t("Please select a directory!"));
       return;
     }
+    setIsStaring(true);
     const params = { directoryPath, port, publicIP, username, password };
     window.electronAPI
       .emit("sharing", { type: shareType, params })
       .then((res) => {
         if (res.success) {
+          setIsStaring(false);
           setIsStarted(true);
           setServiceUrl(res.url);
           QRCode.toDataURL(res.url).then((res) => {
@@ -278,7 +281,7 @@ const App = () => {
             </div>
           </div>
           <div style={{ flex: 1 }}></div>
-          <Button className="btn btn-start" onClick={onStartServiceHandle}>
+          <Button className="btn btn-start" onClick={onStartServiceHandle} isLoding={isStaring}>
             {t("Start Service")}
           </Button>
         </div>