+ spinner

package.json

@@ -11,6 +11,7 @@
     "notiflix": "^3.2.6",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-loader-spinner": "^6.1.6",
     "react-router-dom": "^6.14.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.3"

public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Movie search website"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--

src/components/Layout/Layout.jsx

@@ -1,6 +1,7 @@
 import { NavLink, Outlet } from "react-router-dom";
 import { Suspense } from "react";
 import css from './Layout.module.css'
+import Loader from "components/Loader/Loader";
 
 
 export const Layout = () => {
@@ -12,7 +13,8 @@ export const Layout = () => {
             </nav>
         </header>
         <main>
-            <Suspense fallback={<div>Loading...</div>}>
+            <Suspense fallback={<Loader />}>
+                {/* <Suspense fallback={<div>Loading...</div>}> */}
                 <Outlet />
             </Suspense>
         </main>

src/components/Loader/Loader.jsx

@@ -0,0 +1,18 @@
+import { FallingLines } from 'react-loader-spinner';
+
+
+const Loader = () => {
+    return (
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+            <FallingLines
+                color="#4fa94d"
+                width="100"
+                visible={true}
+                ariaLabel="falling-circles-loading"
+            />
+        </div>
+    )
+};
+
+export default Loader;
+

src/pages/MovieDetails/MovieDetails.jsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { Suspense, useEffect, useRef, useState } from 'react';
 import { fetchMovieDetails } from 'Services/Api';
 import css from './MovieDetails.module.css';
+import Loader from 'components/Loader/Loader';
 
 const MovieDetails = () => {
   const { movieId } = useParams();
@@ -75,7 +76,8 @@ const MovieDetails = () => {
           </div>
         </div>
       )}
-      <Suspense fallback={<div>Loading...</div>}>
+      {/* <Suspense fallback={<div>Loading...</div>}> */}
+      <Suspense fallback={<Loader/>}>
         <Outlet />
       </Suspense>
     </div>

src/pages/MovieDetails/MovieDetails.module.css

@@ -11,6 +11,14 @@
     border-radius: 10px;
 }
 
+
+@media (max-width: 600px) {
+    .movie__box {
+    flex-direction: column;
+    }
+}
+
+
 .movie__image{
     margin-right: 20px;
     border-radius: 10px;