feat(search-form): implement loading

src/components/search-form.tsx

@@ -1,14 +1,18 @@
 import { SearchResult } from "@/model/SearchResult";
-import { FormEvent } from "react";
+import { FormEvent, useState } from "react";
 
 interface SearchFormProps {
   onSearchResultsReady: (searchResults: SearchResult[]) => void;
 }
 
 export default function SearchForm(props: SearchFormProps) {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
   async function onSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
 
+    setIsLoading(true);
+
     const formData = new FormData(event.currentTarget);
     const response = await fetch("/api/submit", {
       method: "POST",
@@ -17,6 +21,8 @@ export default function SearchForm(props: SearchFormProps) {
 
     const data: SearchResult[] = await response.json();
     props.onSearchResultsReady(data);
+
+    setIsLoading(false);
   }
 
   return (
@@ -26,12 +32,14 @@ export default function SearchForm(props: SearchFormProps) {
         name="search_input"
         placeholder="Search for learning resources, tutorials..."
         className="border-2 border-gray-300 px-2 py-1 w-full rounded-lg"
+        disabled={isLoading}
       />
 
       <input
         type="submit"
         className="bg-indigo-500 text-white px-4 rounded-lg hover:bg-indigo-400 cursor-pointer"
-        value="Search"
+        value={isLoading ? "Loading..." : "Search"}
+        disabled={isLoading}
       />
     </form>
   );