From 80d6b801eb6664056b9506eba27f1672226732b9 Mon Sep 17 00:00:00 2001
From: Viktor Fomin <viktor.fomin@onlyoffice.com>
Date: Thu, 11 Nov 2021 14:24:22 +0300
Subject: [PATCH] Web: Files: fix upload panel loading button

---
 .../panels/UploadPanel/LoadingButton.js         | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 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
index 04a4c9cdf13..caebf3671c2 100644
--- 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>