feat(ui): implement loader

Valik3201 · Jan 27, 2024 · 9675164 · 9675164
1 parent 7bbee24
commit 9675164
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 17 deletions.
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -3,12 +3,14 @@ import Searchbar from './Searchbar';
 import { ImageGallery } from './ImageGallery';
 import ImagePortalWelcome from './ImagePortalWelcome';
 import { LoadMoreBtn } from './Button';
+import { SearchResultInfo } from './SearchResultInfo';
 
-import { Container, Row, Col, Alert } from 'react-bootstrap';
+import { Container, Row } from 'react-bootstrap';
 
 import axios from 'axios';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
+import { Loader } from './Loader';
 
 const API_KEY = '41006597-e52c63fe5093395ccafd50f48';
 
@@ -22,11 +24,16 @@ class App extends Component {
       images: [],
       searchQuery: '',
       activePage: 1,
+      isLoading: false,
     };
   }
 
   getImages = async (searchQuery, activePage) => {
     try {
+      this.setState({
+        isLoading: true,
+      });
+
       const params = {
         q: searchQuery,
         page: activePage,
@@ -51,7 +58,9 @@ class App extends Component {
     } catch (error) {
       console.error('Error searching for images:', error.message);
     } finally {
-      // for Loader
+      this.setState({
+        isLoading: false,
+      });
     }
   };
 
@@ -63,32 +72,24 @@ class App extends Component {
     this.setState({ activePage: nextPage });
   };
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     if (prevProps.searchQuery !== this.props.searchQuery) {
       this.getImages(this.props.searchQuery);
     }
   }
 
   render() {
-    const { images, searchQuery } = this.state;
+    const { images, searchQuery, isLoading } = this.state;
 
     return (
       <>
         <Searchbar onSearch={this.getImages} />
         <Container className="d-flex flex-column justify-content-center mb-5 mx-auto">
+          {isLoading && <Loader />}
           {images.length > 0 ? (
             <>
               <Row>
-                <Container>
-                  <Row className="justify-content-center text-center">
-                    <Col xs="auto">
-                      <Alert variant="primary">
-                        Showing results for
-                        <span className="fw-bold"> {searchQuery}</span>
-                      </Alert>
-                    </Col>
-                  </Row>
-                </Container>
+                <SearchResultInfo searchQuery={searchQuery} />
               </Row>
               <Row>
                 <ImageGallery images={images} />

diff --git a/src/components/Loader.jsx b/src/components/Loader.jsx
@@ -2,8 +2,22 @@ import { Spinner } from 'react-bootstrap';
 
 export const Loader = () => {
   return (
-    <Spinner animation="border" role="status" variant="primary">
-      <span className="visually-hidden">Loading...</span>
-    </Spinner>
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 2000,
+      }}
+    >
+      <Spinner animation="border" role="status">
+        <span className="visually-hidden">Loading...</span>
+      </Spinner>
+    </div>
   );
 };