diff --git a/01-frontend/src/pages/Home.tsx b/01-frontend/src/pages/Home.tsx index 05660b1..e161cf3 100644 --- a/01-frontend/src/pages/Home.tsx +++ b/01-frontend/src/pages/Home.tsx @@ -1,6 +1,6 @@ import { Alert, Box, useTheme } from "@mui/material"; import { useQuery } from "@tanstack/react-query"; -import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { useLocation, useNavigate } from "react-router-dom"; import Item from "../components/Item"; @@ -34,7 +34,6 @@ export default function Home() { })) ]; - const [itemsToShow, setItemsToShow] = useState(20); // Anzahl Items, die geladen sind const [selectedCategory, setSelectedCategory] = useState(null); const [selectedRating, setSelectedRating] = useState(null); @@ -100,53 +99,11 @@ export default function Home() { // Items, die aktuell angezeigt werden - const visibleItems:Item[] = filteredItems.slice(0, itemsToShow); - - // Intersection Observer Ref - const loaderRef = useRef(null); + const visibleItems: Item[] = filteredItems; // Container Ref const containerRef = useRef(null); - // Callback für Observer - const handleObserver = useCallback( - (entries: IntersectionObserverEntry[]) => { - const target = entries[0]; - if (target.isIntersecting) { - // Wenn noch mehr Items da sind, lade 20 weitere - setItemsToShow((prev) => { - if (prev >= filteredItems.length) return prev; - return prev + 20; - }); - } - }, - [filteredItems.length] - ); - - // Observer Setup - useEffect(() => { - const option = { - root: null, - rootMargin: "20px", - threshold: 1, - }; - const observer = new IntersectionObserver(handleObserver, option); - const currentLoaderRef = loaderRef.current; - if (currentLoaderRef) observer.observe(currentLoaderRef); - return () => { - if (currentLoaderRef) observer.unobserve(currentLoaderRef); - }; - }, [handleObserver]); - - // Reset itemsToShow bei Filteränderungen - useEffect(() => { - setItemsToShow(20); - - requestAnimationFrame(() => { - containerRef.current?.scrollTo(0, 0); - }); - }, [selectedCategory, selectedRating, priceRange]); - const prevItemsLength = useRef(items.length); useEffect(() => { diff --git a/01-frontend/src/pages/pages.css b/01-frontend/src/pages/pages.css index c1ed087..43dd74c 100644 --- a/01-frontend/src/pages/pages.css +++ b/01-frontend/src/pages/pages.css @@ -151,13 +151,6 @@ margin: 30px } -.loader-container { - width: 100%; - display: flex; - justify-content: center; - margin-top: 24px; -} - .no-results { text-align: center; font-size: 1rem;