loader removed, load all items at once instead

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<number>(20); // Anzahl Items, die geladen sind
     const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
     const [selectedRating, setSelectedRating] = useState<string | null>(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<HTMLDivElement | null>(null);
+    const visibleItems: Item[] = filteredItems;
 
     // Container Ref
     const containerRef = useRef<HTMLDivElement>(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(() => {

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;