s

package.json

@@ -15,6 +15,7 @@
     "bootstrap": "^5.3.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-loader-spinner": "^5.4.5",
     "react-scripts": "^5.0.1",
     "styled-components": "^6.0.7",
     "web-vitals": "^2.1.3"

src/components/App.jsx

@@ -9,6 +9,7 @@ import Searchbar from './Searchbar/Searchbar'
   // import axios from "axios";
     import getAllPhotos from '../api/api'
     import { Container } from '@mui/material';
+    import Loader from './Loader/Loader';
 
    class App extends Component {
 
@@ -113,6 +114,7 @@ render() {
 
           <Searchbar  onSubmit={this.hendleFormSubmit}/>   
          {/* <button type='button' onClick={this.toggleModal}>Open modal</button>  */}
+         {isLoading && <Loader />}
          {gallery && gallery.length > 0 && <ImageGallery hits={gallery} />}
          {currentPage < quantityPage && (
           <ButtonLoad handleBtnLoad={this.handleBtnLoad} />

src/components/ImageGallery/ImageGallery.jsx

@@ -1,6 +1,7 @@
 
  import ImageGalleryItem from 'components/ImageGalleryItem/ImageGalleryItem'
  import css from './ImageGallery.module.css'
+
 
 const ImageGallery = ({ hits }) => {
     console.log('hits in ImageGallery  :>> ', hits);

src/components/ImageGalleryItem/ImageGalleryItem.jsx

@@ -40,7 +40,6 @@ return(
    aria-describedby="modal-modal-description"
  >
    <Box sx={style}>
-
      <img src= {largeImageURL}
 alt="Image" style={{ width: 800,   marginBottom: -50, }} />
 

src/components/Loader/Loader.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ColorRing } from 'react-loader-spinner';
+import css from './Loader.module.css'
+
+const Loader = () => {
+  return (
+    <div className={css.loaderWrap}>
+      <ColorRing
+        visible={true}
+        height="80"
+        width="80"
+        ariaLabel="blocks-loading"
+        wrapperStyle={{}}
+        wrapperClass="blocks-wrapper"
+        colors={['#b8c480', '#B2A3B5', '#F4442E', '#51E5FF', '#429EA6']}
+      />
+    </div>
+  );
+};
+
+export default Loader;

src/components/Loader/Loader.module.css

@@ -0,0 +1,6 @@
+.loaderWrap{
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);  
+}