update search pagination

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

@@ -20,6 +20,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 	const [searchedGlobalFiles, setSearchedGlobalFiles] = useState<SearchItem[]>([]);
 	const [searchedGlobalFilesShowNull, setSearchedGlobalFilesShowNull] = useState<boolean>(false);
 	const [loading, setLoading] = useState<boolean>(false);
+	const [paginationLoading, setPaginationLoading] = useState<boolean>(false);
 	const [showGlobalSearch, setShowGlobalSearch] = useState<boolean>(false);
 	const queryClient = useQueryClient();
 
@@ -33,6 +34,8 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 			setSearchedUserFilesShowNull(false);
 			setSearchedGlobalFilesShowNull(false);
 			setShowGlobalSearch(false);
+			setSearchCurrentPages(1);
+			setSearchTotalPages(0);
 		}
 	}));
 
@@ -55,11 +58,14 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 
 	}, [fileId])
 
-	const handlerSearchGlobalFile = useCallback(async (fileId: string, page: number): Promise<void> => {
-		setLoading(true);
-		setSearchedGlobalFilesShowNull(false);
-		setSearchedGlobalFiles([]);
-
+	const handlerSearchGlobalFile = useCallback(async (fileId: string, page: number, actionFromPagination?: boolean): Promise<void> => {
+		if (!actionFromPagination) {
+			setLoading(true);
+			setSearchedGlobalFilesShowNull(false);
+			setSearchedGlobalFiles([]);
+		} else {
+			setPaginationLoading(true);
+		}
 
 		try {
 			let result = await searchGlobalFiles(fileId, page);
@@ -79,6 +85,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 			await queryClient.invalidateQueries({ queryKey: ['userData'] });
 			await queryClient.invalidateQueries({ queryKey: ['userSearchData'] });
 			setLoading(false);
+			setPaginationLoading(false);
 		}
 
 	}, [fileId])
@@ -185,6 +192,11 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 							<div className="global-result-card">
 								<div className="global-result-header">
 									<span>Найдено в интернете</span>
+									{paginationLoading && (
+										<div className="loading-animation">
+											<span className="global-spinner"></span>
+										</div>
+									)}
 								</div>
 								<div className="global-result-content">
 									<SearchedGlobalFilesList list={searchedGlobalFiles} />
@@ -205,7 +217,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 							<span id="global-error-text"></span>
 						</div>
 
-						<Pagination totalPages={searchTotalPages} currentPage={searchCurrentPages} fileId={fileId} callBack={handlerSearchGlobalFile}/>
+						<Pagination totalPages={searchTotalPages} currentPage={searchCurrentPages} fileId={fileId} callBack={handlerSearchGlobalFile} />
 					</div>
 				</div>
 			)}