added loading spinner to the search button

src/components/Form.js

@@ -1,11 +1,18 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
+import { PhotoContext } from "../context/PhotoContext";
+import Spinner from "./Spinner";
 
 const Form = ({ handleSubmit, history }) => {
+  const{loading}=useContext(PhotoContext)
   const [searchEntry, setSearchEntry] = useState("");
   // update search text state
   const updateSearchInput = e => {
     setSearchEntry(e.target.value);
   };
+
+
+
+
   return (
     <form
       className="search-form"
@@ -23,13 +30,13 @@ const Form = ({ handleSubmit, history }) => {
         className={`search-button ${searchEntry.trim() ? "active" : null}`}
         disabled={!searchEntry.trim()}
       >
-        <svg height="32" width="32">
+       {searchEntry&&loading?<Spinner/>: <svg height="32" width="32">
           <path
             d="M19.427 21.427a8.5 8.5 0 1 1 2-2l5.585 5.585c.55.55.546 1.43 0 1.976l-.024.024a1.399 1.399 0 0 1-1.976 0l-5.585-5.585zM14.5 21a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13z"
             fill="#ffffff"
             fillRule="evenodd"
           />
-        </svg>
+        </svg>}
       </button>
     </form>
   );

src/components/Spinner.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const Spinner = () => {
+  return (
+    <div className="spinner">
+    </div>
+  );
+}
+
+export default Spinner;

src/context/PhotoContext.js

@@ -7,6 +7,7 @@ const PhotoContextProvider = props => {
   const [images, setImages] = useState([]);
   const [loading, setLoading] = useState(true);
   const runSearch = query => {
+    setLoading(true)
     axios
       .get(
         `https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=${apiKey}&tags=${query}&per_page=24&format=json&nojsoncallback=1`
@@ -16,6 +17,7 @@ const PhotoContextProvider = props => {
         setLoading(false);
       })
       .catch(error => {
+        setLoading(false)
         console.log(
           "Encountered an error with fetching and parsing data",
           error

src/index.css

@@ -162,6 +162,18 @@ input {
   margin-left: auto;
   margin-right: auto;
 }
+.spinner {
+  border: 6px solid #f3f3f3;
+  /* Light grey */
+  border-top: 6px solid black;
+  /* Blue */
+  border-radius: 50%;
+  width: 15px;
+  height: 15px;
+  animation: spin 2s linear infinite;
+  margin-left: auto;
+  margin-right: auto;
+}
 
 @keyframes spin {
   0% {