diff --git a/search-engine/src/component/search.css b/search-engine/src/component/search.css
index e6b1fccb176900273727c4e2d3e165d735b85a6f..b9337a3dc11b0b561bfe1fe0d45af8b558454b17 100644
--- a/search-engine/src/component/search.css
+++ b/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;
-  }
\ No newline at end of file
+  }
+
+#small-indicator,
+#medium-indicator,
+#large-indicator {
+  vertical-align: middle;
+  margin-right: 10px;
+}
\ No newline at end of file
diff --git a/search-engine/src/component/search.js b/search-engine/src/component/search.js
index e3267562edef61ff5f1c093597b01393fc62fd46..28fd56f804a4b314171e2ec7f056af7a6e2e8135 100644
--- a/search-engine/src/component/search.js
+++ b/search-engine/src/component/search.js
@@ -1,9 +1,11 @@
 
 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>