Loader added

ulta-beauty/package.json

@@ -9,8 +9,10 @@
     "antd": "^5.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-loader-spinner": "^5.3.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.1",
+    "toastr": "^2.1.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

ulta-beauty/src/components/loader.js

+import React from 'react';
+import { ThreeDots } from  'react-loader-spinner';
+
+const Loader = () =>  (
+    <div style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItem: 'center'
+    }}>
+        <ThreeDots 
+            className="loader"
+            height="75" 
+            width="75" 
+            radius="9"
+            color="#b5904a"
+            visible={true}
+        />
+    </div>
+);
+
+export default Loader;
\ No newline at end of file

ulta-beauty/src/components/search.js

 import React, { useEffect, useState } from 'react';
 import SearchResults from './search-results';
+import Loader from './loader';
+import messageService from '../services/MessageService';
 
 import { Button, Input, Col, Row } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
@@ -11,6 +13,7 @@ const Search = () => {
     const [payload, setPayload] = useState(INITIAL_STATE);
     const [searchResults, setSearchResults] = useState([]);
     const [facets, setfacets] = useState([]);
+    const [isLoader, setIsLoader] = useState(false);
 
     const handleOnChange = (e) => {
         setPayload(prevState => ({
@@ -23,11 +26,19 @@ const Search = () => {
     const handleOnSearch = async () => {
         const { searchQuery, facets, filters } = payload;
         if (searchQuery) {
+            setIsLoader(true);
             const apiEndpoint = 'https://api-dot-abs-poc-np-prj-01-3f2a.uc.r.appspot.com';
             const url =  `${apiEndpoint}/search?text=${searchQuery}${facets.length? `&facets=${JSON.stringify(facets)}` : ''}${filters && Object.keys(filters).length? `&filters=${JSON.stringify(filters)}` : ''}`;  
             const searchResults = await fetch(url)
                 .then(res => res.json())
-                .catch(err => console.log(err));
+                .then(_res => {
+                    if (Array.isArray(_res) && _res.length === 0 ) {
+                        messageService.info('', 'No Data Found');
+                    }
+                    return _res;
+                })
+                .catch(err => console.log(err))
+                .finally(() => setIsLoader(false));
             setSearchResults(searchResults.results?.length ? [...searchResults.results] : []);
             !Object.keys(filters || {}).length && setfacets(searchResults.facets?.length ? [...searchResults.facets] : []); // for not updating facets while filtering
         }
@@ -103,6 +114,7 @@ const Search = () => {
                                     onPressEnter={() => handleOnSearch()}
                                 />
                             </Col>
+                            <Col span={2}>   {isLoader && <Loader />}  </Col>
                         </Row>
                     </div>
                     <SearchResults searchResults={searchResults} facets={facets}
@@ -146,6 +158,7 @@ const Search = () => {
                                 }}
                                     onClick={() => handleOnSearch()}
                                 > Search </Button>
+                                { isLoader && <Loader />}
                             </div>
                         </Col>
                     </Row>

ulta-beauty/src/services/MessageService.js

+import toastr from 'toastr';
+import 'toastr/build/toastr.min.css';
+
+class MessageService {
+
+    config = {
+        positionClass : 'toast-top-right',
+        hideDuration: 300,
+        timeOut: 60000
+    }
+
+    static success(message, title, config) {
+        toastr.success(title, message, config ?? this.config );
+    }
+
+    static error(message, title, config) {
+        toastr.error(title, message, config ?? this.config );
+    }
+
+    static warning(message, title, config) {
+        toastr.warning(title, message, config ?? this.config );
+    }
+    
+    static info(message, title, config) {
+        toastr.info(title, message, config ?? this.config );
+    }
+}
+
+export default MessageService;
\ No newline at end of file