add loading indicator

search-engine/src/component/search.css

@@ -24,8 +24,23 @@
     align-items: stretch;
     flex-direction: column;
     width: 150px;
+    margin-right: 0;
+  }
+
+  .indicator-column {
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    width: 15px;
   }
 
   .form-box{
     margin-bottom: 50px;
   }
+
+#small-indicator,
+#medium-indicator,
+#large-indicator {
+  vertical-align: middle;
+  margin-right: 10px;
+}
\ No newline at end of file

search-engine/src/component/search.js

 
 import React, { useState } from 'react';
 import DataGrid, { Scrolling, Sorting, LoadPanel } from 'devextreme-react/data-grid';
+import { Button } from 'devextreme-react/button';
 import TextBox from 'devextreme-react/text-box';
 import "./search.css"
 import axios from "axios";
+import { LoadIndicator } from 'devextreme-react/load-indicator';
 
 function search(query) {
     const config = {
@@ -18,6 +20,7 @@ function search(query) {
 let SearchEngine = function () {
 
     const [queryResult, setQueryResult] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
 
 
     const parseESData = (data) => {
@@ -36,12 +39,14 @@ let SearchEngine = function () {
 
     const handleSubmit = (e) => {
         e.preventDefault();
-
+        setIsLoading(true)
         search(e.target[0].value).then((res) => {
             let parsedRes = parseESData(res.data)
             setQueryResult(parsedRes)
+            setIsLoading(false)
         }).catch((error) => {
             console.log(error)
+            setIsLoading(false)
         })
 
     }
@@ -58,9 +63,13 @@ let SearchEngine = function () {
             <div className="column-left">
             <TextBox width={"100%"} className="dx-field-value" />
             </div>
+            
             <div className="column-right">
             <input type="submit" value="Search" />
             </div>
+            <div className="indicator-column">
+            <LoadIndicator id="medium-indicator" height={20} width={20} visible={isLoading}/>
+            </div>
           </div>
         </form>
         </div>