added loading state

Author: TizianoT

js/components/useDocsSearch/README.md

@@ -12,11 +12,12 @@ function Search() {
 
   // Initialize the useSqlcSearch custom hook
   const {
-    searchText,    // Text to search for
-    searchRes,     // Search results
-    searchError,   // Error information if search fails
-    validSearchUrl,// Boolean indicating if the search URL is valid
-    handleSearch,  // Function to handle search input changes
+    searchText,     // Text to search for
+    searchRes,      // Search results
+    searchError,    // Error information if search fails
+    validSearchUrl, // Boolean indicating if the search URL is valid
+		isLoading,      // Boolean indicating if component is loading search result
+		handleSearch,   // Function to handle search input changes
   } = useDocsSearch(searchUrl);
 
   return (

js/components/useDocsSearch/src/shared.ts

@@ -22,5 +22,6 @@ export interface DocsSearchReturn {
 	searchText: string;
 	searchError: SearchError;
 	validSearchUrl: boolean;
+	isLoading: boolean;
 	handleSearch: (event: ChangeEvent<HTMLInputElement>) => Promise<void>;
 }

js/components/useDocsSearch/src/tester.js

@@ -19,6 +19,7 @@ function UseSqlcSearchTester() {
 		searchRes,     // Search results
 		searchError,   // Error information if search fails
 		validSearchUrl,// Boolean indicating if the search URL is valid
+		isLoading,     // Boolean indicating if component is loading search result
 		handleSearch,  // Function to handle search input changes
 	} = useDocsSearch(searchUrl);
 
@@ -77,7 +78,7 @@ function UseSqlcSearchTester() {
 						<>
 							{/* Display search results */}
 							<p className="text-lg font-semibold mb-4 text-gray-700">
-								Number of results: {searchRes.data.length}
+								Number of results: {isLoading ? "loading ..." : searchRes.data.length}
 							</p>
 							<div className="bg-gray-100 p-4 rounded-lg max-h-64 overflow-auto text-sm text-gray-800 whitespace-pre-wrap">
 								<pre>{JSON.stringify(searchRes, null, 2)}</pre>

js/components/useDocsSearch/src/useDocsSearch.tsx

@@ -31,6 +31,9 @@ function useDocsSearch(searchUrl: string): DocsSearchReturn {
 	// State to store the parsed URL object
 	const [url, setUrl] = useState<URL>(undefined);
 
+	// State to store the loading state
+	const [isLoading, setIsLoading] = useState<boolean>(false);
+
 	// Effect to validate and parse the search URL whenever it changes
 	useEffect(() => {
 		if (searchUrl) {
@@ -54,7 +57,7 @@ function useDocsSearch(searchUrl: string): DocsSearchReturn {
 	const search = async (query: string) => {
 		lastSearchIdRef.current += 1;
 		setLastSearchId(lastSearchIdRef.current);
-
+		setIsLoading(true);
 		if (query && url) {
 			// Perform search only if query is non-empty and URL is valid
 			try {
@@ -100,6 +103,7 @@ function useDocsSearch(searchUrl: string): DocsSearchReturn {
 			setSearchRes({ data: [] });
 			setSearchError(undefined);
 		}
+		setIsLoading(false);
 	};
 
 	/**
@@ -117,6 +121,7 @@ function useDocsSearch(searchUrl: string): DocsSearchReturn {
 		searchText,
 		searchError,
 		validSearchUrl,
+		isLoading,
 		handleSearch,
 	};
 }