标签排序

奖赏按钮
搜索框按钮加载动画
EndSlogan排版
notion-viewport处理

components/SearchInput.js

@@ -5,11 +5,14 @@ import { useRef, useState } from 'react'
 const SearchInput = ({ currentTag, currentSearch }) => {
   const { locale } = useGlobal()
   const [searchKey, setSearchKey] = useState(currentSearch)
+  const [onLoading,setLoadingState] = useState(false)
   const router = useRouter()
   const searchInputRef = useRef()
   const handleSearch = (key) => {
     if (key && key !== '') {
+      setLoadingState(true)
       router.push({ pathname: '/search', query: { s: key } }).then(r => {
+        setLoadingState(false)
       })
     } else {
       router.push({ pathname: '/' }).then(r => {
@@ -43,11 +46,11 @@ const SearchInput = ({ currentTag, currentSearch }) => {
       onChange={e => updateSearchKey(e.target.value)}
       defaultValue={currentSearch}
     />
-    { (searchKey && searchKey.length && <i className='fa fa-close text-gray-300 float-right p-3 cursor-pointer' onClick={ cleanSearch } />)}
+    { (searchKey && searchKey.length && <i className='fa fa-close text-gray-300 float-right p-4 cursor-pointer' onClick={ cleanSearch } />)}
 
     <div className='py-4 px-4 bg-gray-50 flex border-l dark:border-gray-700 dark:bg-gray-500 justify-center align-middle cursor-pointer'
          onClick={() => { handleSearch(searchKey) }}>
-      <i className='fa fa-search text-black cursor-pointer' />
+      <i className={`fa ${onLoading ? 'fa-spinner animate-spin':'fa-search'} text-black cursor-pointer`}/>
     </div>
   </div>
 }