"shimmer effect"

README.md

@@ -24,9 +24,9 @@
 - asking user api key
 
 # To Do:
-- responsive(*)
+- responsive(*) 
 - each card functionality ✔
-- shimmer UI (*)
+- shimmer UI (*) ✔
 - Error Handling ✔
 - test user already present ✔ 
 - gpt page css 

package.json

@@ -14,6 +14,7 @@
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.0",
     "react-scripts": "5.0.1",
+    "react-shimmer-effects": "^1.0.3",
     "swiper": "^11.0.6"
   },
   "scripts": {

src/components/ContentPage.js

@@ -2,12 +2,8 @@ import React, { useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 import DetailedContent from './DetailedContent';
 import SimilarContent from './SimilarContent';
-import { MOVIE_API_OPTION } from '../utils/constant';
-import { useDispatch } from 'react-redux'
-import { addSimilarMovie } from '../utils/movieSlice';
 import useSimilarMovie from '../customHook/useSimilarMovie';
 import useRecommendedMovies from '../customHook/useRecommendedMovies';
-import Header from './Header';
 
 const ContentPage = () => {
     const {id}=useParams();

src/components/Secondarycotainer.js

@@ -1,9 +1,13 @@
 import { useSelector } from "react-redux";
 import Movielist from "./Movielist";
+import Shimmer from "./Shimmer";
 
 const Secondarycontainer=()=>{
    const movie=useSelector(store=>store.movie)
     //  console.log(movie.nowPlayingMovies)
+    if(movie.nowPlayingMovies===null)
+       return <Shimmer/> 
+
      return (
       movie.nowPlayingMovies &&
        ( <div className="bg-black w-screen aspect-video">

src/components/Shimmer.js

@@ -0,0 +1,7 @@
+import { ShimmerSimpleGallery } from "react-shimmer-effects";
+
+const Shimmer = () => {
+  return <ShimmerSimpleGallery card imageHeight={300} />;
+};
+
+ export default Shimmer;

src/customHook/useNowPlayingMovies.js

@@ -7,7 +7,7 @@ const useNowPlayingMovies=()=>{
     const getMovies=async ()=>{
       const data =await fetch('https://api.themoviedb.org/3/movie/now_playing?page=1', MOVIE_API_OPTION)
       const json=await data.json();
-      // console.log(json.results)
+       // console.log(json.results)
       dispatch(addNowPlayingMovie(json.results));
     }
 

src/customHook/usePopularMovie.js

@@ -8,8 +8,8 @@ const usePopularMovie=()=>{
 
     const getPopularMovie=async()=>{
      const data=await fetch('https://api.themoviedb.org/3/movie/popular?language=en-US&page=1', MOVIE_API_OPTION);
-     const json =await data.json();
-    //  console.log(json.results);
+     const json =await data.json(); 
+     //  console.log(json.results);
      dispatch(addPopular(json.results));
 
     }

src/utils/constant.js

@@ -7,22 +7,13 @@ export const AVATAR=
 export const NETFLIX_BG=
 "https://assets.nflxext.com/ffe/siteui/vlv3/c0b69670-89a3-48ca-877f-45ba7a60c16f/2642e08e-4202-490e-8e93-aff04881ee8a/IN-en-20240212-popsignuptwoweeks-perspective_alpha_website_large.jpg";
 
-// export const MOVIE_API_OPTION = {
-//    method: 'GET',
-//    headers: {
-//      accept: 'application/json',
-//      Authorization: process.env.TMDB_API,
-//    }
-//  };
-
-export const MOVIE_API_OPTION ={
-  method: 'GET',
-  headers: {
-    accept: 'application/json',
-    Authorization: process.env.TMDB_API,
-
-  }
-};
+export const MOVIE_API_OPTION = {
+   method: 'GET',
+   headers: {
+     accept: 'application/json',
+     Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJlNDBkMzYzMTFlY2NmYWUxNDQ2ZDg3ZmVmNDkzZThhYSIsInN1YiI6IjY1ZDMxZjM5NGJjMzhiMDE4OTU1MzA2ZSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Mgj7uyWAiE27gA0u1LpwiEdnUnl7dEmi3pIs-24jAGY',
+   }
+ };
 
  export const POSTER_PATH_CDN=
  "https://image.tmdb.org/t/p/original";