From 4a803f22c5fcf0332ecd5cef0a445238130f91c9 Mon Sep 17 00:00:00 2001
From: Cowboy Ho <dreamran43@gmail.com>
Date: Fri, 8 Apr 2022 15:19:27 +0800
Subject: [PATCH] UI bug fix

---
 src/App.js               | 29 +++++++++++++----------------
 src/Components/Movie.jsx |  4 ++--
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/App.js b/src/App.js
index b21c011..143b6d1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence } from 'framer-motion';
 import { useEffect, useState } from 'react';
 import './App.css';
 import Filter from './Components/Filter';
@@ -8,7 +8,7 @@ function App() {
   const [popular, setPopular] = useState([]);
   const [filtered, setFiltered] = useState([]);
   const [activeGenre, setActiveGenre] = useState(0);
-  
+
   const fetchPopular = async () => {
     // i haven't used .env file because its free api key     
     const response = await fetch("https://api.themoviedb.org/3/movie/popular?api_key=1af8f5a0dac921ed793eaf9b1a89b23e&language=en-US&page=1");
@@ -23,25 +23,22 @@ function App() {
 
   return (
     <div className="App">
-    <Filter 
-      popular={popular}
-      setFiltered={setFiltered}
-      activeGenre={activeGenre}
-      setActiveGenre={setActiveGenre}
-    />
-      <motion.div
-        layout 
-        className="popular-movies"
-      >
+      <Filter
+        popular={popular}
+        setFiltered={setFiltered}
+        activeGenre={activeGenre}
+        setActiveGenre={setActiveGenre}
+      />
+      <div className="popular-movies">
         <AnimatePresence>
           {filtered.map(movie => (
-            <Movie 
-              key={movie.id} 
-              movie = {movie}
+            <Movie
+              key={movie.id}
+              movie={movie}
             />
           ))}
         </AnimatePresence>
-      </motion.div>
+      </div>
     </div>
   );
 }
diff --git a/src/Components/Movie.jsx b/src/Components/Movie.jsx
index 3b7f599..c511a23 100644
--- a/src/Components/Movie.jsx
+++ b/src/Components/Movie.jsx
@@ -2,8 +2,8 @@ import { motion } from "framer-motion"
 
 const Movie = ({ movie }) => {
   return (
-    <motion.div 
-      layout
+    <motion.div
+      layout="position"
       animate={{ opacity: 1 }}
       initial={{ opacity: 0 }}
       exit={{ opacity: 0 }}