From 8ecc18f9279cfebb3573ab99b580f75d8368ad5f Mon Sep 17 00:00:00 2001
From: gazizova-vlada <vladamuzyka@yandex.ru>
Date: Mon, 11 Sep 2023 11:23:42 +0300
Subject: [PATCH] Web:When clicking on a file, a loader appears.

---
 .../src/components/panels/NewFilesPanel/index.js | 16 +++++++++++++---
 packages/components/row/index.js                 | 10 +++++-----
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/panels/NewFilesPanel/index.js b/packages/client/src/components/panels/NewFilesPanel/index.js
index dfe4b4af47..867ec6dfb0 100644
--- a/packages/client/src/components/panels/NewFilesPanel/index.js
+++ b/packages/client/src/components/panels/NewFilesPanel/index.js
@@ -52,6 +52,7 @@ const NewFilesPanel = (props) => {
 
   const [listFiles, setListFiles] = useState(newFiles);
   const [inProgress, setInProgress] = useState(false);
+  const [currentOpenFileId, setCurrentOpenFileId] = useState(null);
 
   const onClose = () => {
     if (inProgress) return;
@@ -108,6 +109,8 @@ const NewFilesPanel = (props) => {
 
     const { id, extension: fileExst } = e.target.dataset;
 
+    setCurrentOpenFileId(id);
+
     const fileIds = fileExst ? [id] : [];
     const folderIds = fileExst ? [] : [id];
 
@@ -127,7 +130,10 @@ const NewFilesPanel = (props) => {
       .catch((err) => {
         toastr.error(err);
       })
-      .finally(() => setInProgress(false));
+      .finally(() => {
+        setInProgress(false);
+        setCurrentOpenFileId(null);
+      });
   };
 
   const onFileClick = (item) => {
@@ -228,7 +234,11 @@ const NewFilesPanel = (props) => {
       const element = getItemIcon(file);
 
       return (
-        <Row key={file.id} element={element}>
+        <Row
+          key={file.id}
+          element={element}
+          inProgress={currentOpenFileId === file.id.toString()}
+        >
           <StyledLink
             onClick={onNewFileClick}
             containerWidth="100%"
@@ -247,7 +257,7 @@ const NewFilesPanel = (props) => {
         </Row>
       );
     });
-  }, [onNewFileClick, getItemIcon]);
+  }, [onNewFileClick, getItemIcon, currentOpenFileId]);
 
   const element = (
     <StyledAsidePanel visible={visible}>
diff --git a/packages/components/row/index.js b/packages/components/row/index.js
index 63341cbdd0..103c837917 100644
--- a/packages/components/row/index.js
+++ b/packages/components/row/index.js
@@ -144,13 +144,13 @@ class Row extends React.Component {
                 />
               </StyledCheckbox>
             )}
+            {mode == "default" && renderElement && (
+              <StyledElement onClick={onRowClick} className="styled-element">
+                {element}
+              </StyledElement>
+            )}
           </>
         )}
-        {mode == "default" && renderElement && (
-          <StyledElement onClick={onRowClick} className="styled-element">
-            {element}
-          </StyledElement>
-        )}
 
         <StyledContent onClick={onRowClick} className="row_content">
           {children}