add search animation

src/app/ui/search/file-search-panel.tsx

@@ -2,12 +2,14 @@ import { SearchedUserFilesList } from '@/app/ui/search/searched-user-files-list'
 import { SearchedGlobalFilesList } from '@/app/ui/search/searched-global-files-list';
 import { useCallback, useState, useImperativeHandle } from 'react';
 import { searchUserFiles, searchGlobalFiles } from '@/app/actions/fileEntity';
+import { fa } from 'zod/v4/locales';
 
 export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: any }) {
 	const [searchedUserFiles, setSearchedUserFiles] = useState<string[]>([]);
 	const [searchedUserFilesShowNull, setSearchedUserFilesShowNull] = useState<boolean>(false);
 	const [searchedGlobalFiles, setSearchedGlobalFiles] = useState<string[]>([]);
 	const [searchedGlobalFilesShowNull, setSearchedGlobalFilesShowNull] = useState<boolean>(false);
+	const [loading, setLoading] = useState<boolean>(false);
 
 	useImperativeHandle(ref, () => ({
 		clearList: () => {
@@ -36,6 +38,10 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 	}, [fileId])
 
 	const handlerSearchGlobalFile = useCallback(async (fileId: string): Promise<void> => {
+		setLoading(true);
+		setSearchedGlobalFilesShowNull(false);
+		setSearchedGlobalFiles([]);
+
 
 		try {
 			let result = await searchGlobalFiles(fileId);
@@ -46,6 +52,8 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 			}
 		} catch (error) {
 
+		} finally {
+			setLoading(false);
 		}
 
 	}, [fileId])
@@ -144,6 +152,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 						type="button"
 						className="global-search-btn"
 						id="global-search-btn"
+						disabled={loading ? true : false}
 						onClick={() => {
 							if (fileId) {
 								handlerSearchGlobalFile(fileId)
@@ -153,7 +162,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 						Найти в интернете
 					</button>
 
-					<div className="global-loading" id="global-loading">
+					<div className={`global-loading ${loading ? 'show' : ''}`} id="global-loading">
 						<div className="global-spinner"></div>
 						<div className="global-loading-text" id="global-loading-text">
 							Поиск изображений в интернете...