diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js
index bea0bc19e5..7138937455 100644
--- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js
+++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js
@@ -50,6 +50,7 @@ const propTypes = {
   onItemRename: PropTypes.func.isRequired,
   posX: PropTypes.number,
   posY: PropTypes.number,
+  dirent: PropTypes.object,
 };
 
 class DirentGridView extends React.Component {
diff --git a/frontend/src/components/search/ai-search.js b/frontend/src/components/search/ai-search.js
index 2f11fcf124..027d78fa87 100644
--- a/frontend/src/components/search/ai-search.js
+++ b/frontend/src/components/search/ai-search.js
@@ -49,7 +49,7 @@ export default class AISearch extends Component {
       isLoading: false,
       hasMore: true,
       isMaskShow: false,
-      isResultShow: false,
+      showRecent: true,
       isResultGetted: false,
       isCloseShow: false,
       isSearchInputShow: false, // for mobile
@@ -228,6 +228,9 @@ export default class AISearch extends Component {
   };
 
   onChangeHandler = (event) => {
+    if (this.state.showRecent) {
+      this.setState({ showRecent: false });
+    }
     const newValue = event.target.value;
     this.setState({ value: newValue }, () => {
       if (this.inputValue === newValue.trim()) return;
@@ -254,7 +257,6 @@ export default class AISearch extends Component {
       this.setState({
         highlightIndex: 0,
         resultItems: [],
-        isResultShow: false,
         isResultGetted: false
       });
       return;
@@ -272,7 +274,6 @@ export default class AISearch extends Component {
       this.source.cancel('prev request is cancelled');
     }
     this.setState({
-      isResultShow: true,
       isResultGetted: false,
       resultItems: [],
       highlightIndex: 0,
@@ -350,11 +351,11 @@ export default class AISearch extends Component {
       value: '',
       isMaskShow: false,
       isCloseShow: false,
-      isResultShow: false,
       isResultGetted: false,
       resultItems: [],
       highlightIndex: 0,
       isSearchInputShow: false,
+      showRecent: true,
     });
   }
 
@@ -403,25 +404,33 @@ export default class AISearch extends Component {
   }
 
   renderSearchResult() {
-    const { resultItems, highlightIndex, width, searchMode, answeringResult } = this.state;
+    const { resultItems, highlightIndex, width, isResultGetted } = this.state;
     if (!width || width === 'default') return null;
 
-    if (!this.state.isResultShow) {
+    if (this.state.showRecent) {
       const { repoID } = this.props;
       let storeKey = 'sfVisitedAISearchItems';
       if (repoID) {
         storeKey += repoID;
       }
       const visitedItems = JSON.parse(localStorage.getItem(storeKey)) || [];
-      return visitedItems.length ? this.renderVisitedItems(visitedItems) : null;
+      if (visitedItems.length) {
+        return this.renderVisitedItems(visitedItems);
+      }
     }
 
-    if (!this.state.isResultGetted || getValueLength(this.inputValue) < 3) {
-      return (
-        <span className="loading-icon loading-tip"></span>
-      );
+    const searchStrLength = getValueLength(this.inputValue);
+
+    if (searchStrLength === 0) {
+      return <div className="search-result-none">{gettext('Type characters to start search')}</div>;
     }
-    if (!resultItems.length) {
+    else if (searchStrLength < 3) {
+      return <div className="search-result-none">{gettext('Type more characters to start search')}</div>;
+    }
+    else if (!isResultGetted) {
+      return <span className="loading-icon loading-tip"></span>;
+    }
+    else if (!resultItems.length) {
       return (
         <>
           <li className='search-result-item align-items-center' onClick={this.openAsk}>
@@ -546,7 +555,7 @@ export default class AISearch extends Component {
   render() {
     let width = this.state.width !== 'default' ? this.state.width : '';
     let style = {'width': width};
-    const { isMaskShow, isCloseShow, searchMode, answeringResult, resultItems } = this.state;
+    const { isMaskShow, isCloseShow, searchMode } = this.state;
     const placeholder = `${this.props.placeholder}${isMaskShow ? '' : ` (${controlKey} + f )`}`;
 
     if (searchMode === SEARCH_MODE.QA) {
diff --git a/frontend/src/components/search/search.js b/frontend/src/components/search/search.js
index f362ca7675..2a42ed5c0a 100644
--- a/frontend/src/components/search/search.js
+++ b/frontend/src/components/search/search.js
@@ -34,7 +34,7 @@ class Search extends Component {
       isLoading: false,
       hasMore: true,
       isMaskShow: false,
-      isResultShow: false,
+      showRecent: true,
       isResultGetted: false,
       isCloseShow: false,
       isSearchInputShow: false, // for mobile
@@ -194,6 +194,9 @@ class Search extends Component {
   };
 
   onChangeHandler = (event) => {
+    if (this.state.showRecent) {
+      this.setState({ showRecent: false });
+    }
     const newValue = event.target.value;
     this.setState({ value: newValue }, () => {
       if (this.inputValue === newValue.trim()) return;
@@ -223,7 +226,6 @@ class Search extends Component {
       this.setState({
         highlightIndex: 0,
         resultItems: [],
-        isResultShow: false,
         isResultGetted: false
       });
       return;
@@ -241,7 +243,6 @@ class Search extends Component {
       this.source.cancel('prev request is cancelled');
     }
     this.setState({
-      isResultShow: true,
       isResultGetted: false,
       resultItems: [],
       highlightIndex: 0,
@@ -281,9 +282,9 @@ class Search extends Component {
       });
     } else {
       if (enableSeafileAI) {
-        this.onAiSearch(queryData, cancelToken)
+        this.onAiSearch(queryData, cancelToken);
       } else {
-        this.onNormalSearch(queryData, cancelToken, page)
+        this.onNormalSearch(queryData, cancelToken, page);
       }
     }
   };
@@ -293,29 +294,29 @@ class Search extends Component {
     queryData['per_page'] = PER_PAGE;
     queryData['page'] = page;
     seafileAPI.searchFiles(queryData, cancelToken).then(res => {
-        this.source = null;
-        if (res.data.total > 0) {
-          this.setState({
-            resultItems: [...this.state.resultItems, ...this.formatResultItems(res.data.results)],
-            isResultGetted: true,
-            isLoading: false,
-            page: page + 1,
-            hasMore: res.data.has_more,
-          });
-          return;
-        }
+      this.source = null;
+      if (res.data.total > 0) {
         this.setState({
-          highlightIndex: 0,
-          resultItems: [],
-          isLoading: false,
+          resultItems: [...this.state.resultItems, ...this.formatResultItems(res.data.results)],
           isResultGetted: true,
+          isLoading: false,
+          page: page + 1,
           hasMore: res.data.has_more,
         });
-      }).catch(error => {
-        /* eslint-disable */
-        console.log(error);
-        this.setState({ isLoading: false });
+        return;
+      }
+      this.setState({
+        highlightIndex: 0,
+        resultItems: [],
+        isLoading: false,
+        isResultGetted: true,
+        hasMore: res.data.has_more,
       });
+    }).catch(error => {
+      /* eslint-disable */
+      console.log(error);
+      this.setState({ isLoading: false });
+    });
   }
 
   onAiSearch = (params, cancelToken) => {
@@ -381,40 +382,47 @@ class Search extends Component {
       value: '',
       isMaskShow: false,
       isCloseShow: false,
-      isResultShow: false,
       isResultGetted: false,
       resultItems: [],
       highlightIndex: 0,
       isSearchInputShow: false,
+      showRecent: true,
     });
   }
 
   renderSearchResult() {
-    const { resultItems, highlightIndex, width } = this.state;
+    const { resultItems, width, showRecent, isResultGetted } = this.state;
     if (!width || width === 'default') return null;
 
-    if (!this.state.isResultShow) {
+    if (showRecent) {
       const { repoID } = this.props;
       let storeKey = 'sfVisitedSearchItems';
       if (repoID) {
         storeKey += repoID;
       }
       const visitedItems = JSON.parse(localStorage.getItem(storeKey)) || [];
-      return visitedItems.length ? this.renderResults(visitedItems, true) : null;
+      if (visitedItems.length > 0) {
+        return this.renderResults(visitedItems, true);
+      }
     }
 
-    if (!this.state.isResultGetted || getValueLength(this.inputValue) < 3) {
-      return (
-        <span className="loading-icon loading-tip"></span>
-      );
-    }
-    if (!resultItems.length) {
-      return (
-        <div className="search-result-none">{gettext('No results matching.')}</div>
-      );
-    }
+    const searchStrLength = getValueLength(this.inputValue);
 
-    return this.renderResults(resultItems);
+    if (searchStrLength === 0) {
+      return <div className="search-result-none">{gettext('Type characters to start search')}</div>;
+    }
+    else if (searchStrLength < 3) {
+      return <div className="search-result-none">{gettext('Type more characters to start search')}</div>;
+    }
+    else if (!isResultGetted) {
+      return <span className="loading-icon loading-tip"></span>;
+    }
+    else if (resultItems.length > 0) {
+      return this.renderResults(resultItems);
+    }
+    else {
+      return <div className="search-result-none">{gettext('No results matching.')}</div>;
+    }
   }
 
   renderResults = (resultItems, isVisited) => {
diff --git a/frontend/src/pages/search/main-panel.js b/frontend/src/pages/search/main-panel.js
index c68278ff21..e3dd121027 100644
--- a/frontend/src/pages/search/main-panel.js
+++ b/frontend/src/pages/search/main-panel.js
@@ -51,7 +51,7 @@ class SearchViewPanel extends React.Component {
     });
 
     if (enableSeafileAI) {
-      this.onAiSearch(params)
+      this.onAiSearch(params);
     } else {
       this.onNormalSearch(params);
     }
@@ -82,18 +82,18 @@ class SearchViewPanel extends React.Component {
         toaster.danger(gettext('Please check the network.'), {duration: 3});
       }
     });
-  }
+  };
 
   onAiSearch = (params) => {
     let results = [];
     seafileAPI.aiSearchFiles(params, null).then(res => {
       results = [...results, ...this.formatResultItems(res.data.results)];
       this.setState({
-          resultItems: results,
-          isResultGetted: true,
-          isLoading: false,
-          hasMore: false,
-        });
+        resultItems: results,
+        isResultGetted: true,
+        isLoading: false,
+        hasMore: false,
+      });
     }).catch(error => {
       /* eslint-disable */
       console.log(error);