fix filebrowser hight and improve search speed

Used settimeout to prevent searching on every keystroke

src/components/fileBrowser.jsx

@@ -44,13 +44,13 @@ const FBContainer = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  height: inherit;
   position: relative;
 `
 
 // bunch of styled components
 const BrowserWrapper = styled.div`
-  height: 100%;
+  height: inherit;
   width: 100%;
   overflow-x: hidden;
   overflow-y: scroll;
@@ -219,6 +219,7 @@ class FileBrowser extends Component {
     this.backListener = undefined
 
     this.handleInputChange = this.handleInputChange.bind(this)
+    this.searchTimeout = undefined
   }
 
   componentDidMount = () => {
@@ -257,12 +258,15 @@ class FileBrowser extends Component {
 
   // used to filter the files
   handleInputChange({target}) {
-    const value = target.type === 'checkbox' ? target.checked : target.value
-    const name = target.name
+    clearTimeout(this.searchTimeout)
 
-    this.setState({ [name]: value })
+    const value = target.type === 'checkbox' ? target.checked : target.value
+
+    this.searchTimeout = setTimeout(this.doSearch, 200, value.toLowerCase())
   }
 
+  doSearch = filter => this.setState({ filter })
+
   // change the way files should be ordered
   updateOrder = orderBy => {
     if (this.state.orderBy === orderBy) {
@@ -396,6 +400,8 @@ class FileBrowser extends Component {
     else        files = this.state.files
 
     return files
+    // apply search filter
+    .filter(v => v.Name?.toLowerCase().indexOf(this.state.filter) !== -1)
     // sort by name
     .sort((a,b) => this.state.orderBy === "name" ? this.state.orderAscending ? a.Name.localeCompare(b.Name, 'nl', { sensitivity: 'base' }) : b.Name.localeCompare(a.Name, 'nl', { sensitivity: 'base' }) : 0)
     // // sort by modified date
@@ -404,8 +410,6 @@ class FileBrowser extends Component {
     .sort((a,b) => this.state.orderBy === "size" ? this.state.orderAscending ? a.Size - b.Size : b.Size - a.Size : 0)
     // // sort folders to top
     .sort((a,b) => (b.IsDir ? 1 : 0) - (a.IsDir ? 1 : 0))
-    // apply search filter
-    .filter(v => v.Name?.includes(this.state.filter))
     .map(v => (
       <Fragment key={v.Name + "file"}>
         { this.renderImage(v.MimeType, v.Name) }
@@ -453,7 +457,7 @@ class FileBrowser extends Component {
           </div>
           <div>
             <SearchLabel htmlFor="filterFiles" style={{ textAlign: "end" }} > Search </SearchLabel>
-            <SearchInput name="filter" id="filterFiles" type="text" placeholder="search" value={this.state.filter} autoComplete="off" onChange={this.handleInputChange} />
+            <SearchInput name="filter" id="filterFiles" type="text" placeholder="search" initialValue="" autoComplete="off" onChange={this.handleInputChange} />
           </div>
 
           <GridFileBrowser>

src/components/fileBrowser.styled.js

@@ -25,7 +25,7 @@ export const Label = styled.label`
 export const FileBrowsersContainer = styled.div`
   display: flex;
   gap: 0 1rem;
-  height: calc(100% - 7rem);
+  height: calc(94vh - 9rem);
 `
 
 export const FileBrowserWrapper = styled.div`
@@ -33,7 +33,7 @@ export const FileBrowserWrapper = styled.div`
   flex-direction: column;
   gap: .5rem 0;
   width: 100%;
-  height: 100%;
+  height: inherit;
 `
 
 export const FileBrowserRemotes = styled.div`