From 116ecdfb72a667f5b65ed447624123c1e723f91b Mon Sep 17 00:00:00 2001
From: controlol <laluckyluc7@gmail.com>
Date: Mon, 1 Nov 2021 20:30:41 +0100
Subject: [PATCH] add loading state

---
 src/components/fileBrowserMenu.jsx | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/fileBrowserMenu.jsx b/src/components/fileBrowserMenu.jsx
index 0251c1e..ecbeff1 100644
--- a/src/components/fileBrowserMenu.jsx
+++ b/src/components/fileBrowserMenu.jsx
@@ -1,4 +1,4 @@
-import { Component } from 'react'
+import React, { Component } from 'react'
 import { Button, Cross, PopupContainer, PopupTitle } from '../styled'
 import API from '../utils/API'
 import FileBrowser from './fileBrowser'
@@ -19,6 +19,7 @@ class FileBrowserMenu extends Component {
       ],
       currentPath: ["", ""],
       browserFs: ["", ""],
+      loading: [false, false],
       errMessage: "",
       dualBrowser: false
     }
@@ -48,6 +49,10 @@ class FileBrowserMenu extends Component {
     return new Promise((resolve, reject) => {
       assert(brIndex === 0 || brIndex === 1, {brIndex})
 
+      let { loading } = this.state
+      loading[brIndex] = true
+      this.setState({ loading })
+
       if (newPath === "") newPath = "/"
 
       let { browserFs } = this.state
@@ -64,13 +69,21 @@ class FileBrowserMenu extends Component {
       .then(response => {
         if (typeof response.data.list !== "object") return reject(new Error("Invalid response"))
 
+        if (response.data.list.length > 100) response.data.list.length = 100
         let { files } = this.state
         files[brIndex] = response.data.list
-        this.setState({ files, currentPath, errMessage: "" })
+        loading[brIndex] = false
+        this.setState({ files, currentPath, errMessage: "", loading })
 
         return resolve()
       })
-      .catch(reject)
+      .catch(() => {
+        let { loading } = this.state
+        loading[brIndex] = false
+        this.setState({ loading })
+
+        return reject()
+      })
     })
   }
 
@@ -110,12 +123,12 @@ class FileBrowserMenu extends Component {
   renderRemoteButtons = brIndex => {
     assert( brIndex === 0 || brIndex === 1, {brIndex})
     return this.props.remotes.map(v => (
-      <Button onClick={() => this.setRemote(brIndex, v.name)}> { v.name } </Button>
+      <Button key={v.name} onClick={() => this.setRemote(brIndex, v.name)}> { v.name } </Button>
     ))
   }
 
   render = () => {
-    const { files, currentPath } = this.state
+    const { files, currentPath, loading } = this.state
 
     return (
       <PopupContainer>
@@ -133,6 +146,7 @@ class FileBrowserMenu extends Component {
               files={files[0]}
               updateFiles={path => this.getFiles(0, path)}
               currentPath={currentPath[0]}
+              loading={loading[0]}
             />
           </FileBrowserWrapper>
         </FileBrowsersContainer>
@@ -141,4 +155,8 @@ class FileBrowserMenu extends Component {
   }
 }
 
-export default FileBrowserMenu
\ No newline at end of file
+const compareProps = (prevProps, nextProps) => {
+  return true
+}
+
+export default React.memo(FileBrowserMenu, compareProps)
\ No newline at end of file