Web: Files: fix upload panel loading button

ONLYOFFICE · Nov 11, 2021 · 80d6b80 · 80d6b80
1 parent 3a03d65
commit 80d6b80
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/products/ASC.Files/Client/src/components/panels/UploadPanel/LoadingButton.js b/products/ASC.Files/Client/src/components/panels/UploadPanel/LoadingButton.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styled, { css, keyframes } from "styled-components";
 import globalColors from "@appserver/components/utils/globalColors";
 
@@ -32,7 +32,7 @@ const StyledCircle = styled.div`
   }
 
   ${(props) =>
-    props.percent === 0
+    props.percent === 0 || (props.isAnimation && props.inConversion)
       ? css`
           .circle__fill {
             animation: ${rotate360} 2s linear infinite;
@@ -86,6 +86,13 @@ const StyledLoadingButton = styled.div`
 
 const LoadingButton = ({ id, className, style, ...rest }) => {
   const { percent, onClick, isConversion, inConversion } = rest;
+  const [isAnimation, setIsAnimation] = useState(true);
+
+  const stopAnimation = () => {
+    setIsAnimation(false);
+  };
+
+  setTimeout(stopAnimation, 5000);
 
   return (
     <StyledCircleWrap
@@ -94,7 +101,11 @@ const LoadingButton = ({ id, className, style, ...rest }) => {
       style={style}
       onClick={onClick}
     >
-      <StyledCircle percent={percent} isConversion={isConversion}>
+      <StyledCircle
+        percent={percent}
+        inConversion={inConversion}
+        isAnimation={isAnimation}
+      >
         <div className="circle__mask circle__full">
           <div className="circle__fill"></div>
         </div>