Список сделали по подсказке ИИ

db.json

@@ -1,22 +0,0 @@
-{
-    "advertisement": [
-        {
-            "id":1,
-            "name":"Продаю голодного кота!",
-            "description":"Кот бегемот. Прокормить невозможно!",
-            "url":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqlWZ1N8qSUMB1HuqN6DjnXP_D5NRGNJ-W6zLZqP-Y9Q&s=10"
-        },
-        {
-            "id":2,
-            "name":"Продаю машину",
-            "description":"Не бита не крашена без пробега по РФ",
-            "url":"https://s0.rbk.ru/v6_top_pics/media/img/9/33/347054091401339.jpeg"
-        },
-        {
-            "id":3,
-            "name":"Продаю квартиру",
-            "description":"Центр города, с видом на море.",
-            "url":"https://hoff.ru/upload/medialibrary/11c/11cb47c1d2d4f248b7dde57f479f2d47.jpg"
-        }
-    ]
-}

package.json

@@ -4,17 +4,14 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "server": "json-server db.json",
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
-    "json-server": "^1.0.0-beta.15",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react-dom": "^19.1.0"
-    "react-router-dom": "^7.18.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
@@ -25,6 +22,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
+    "sass-embedded": "^1.99.0",
     "vite": "^6.3.5"
   }
 }

src/App.css

@@ -0,0 +1,15 @@
+.container {
+/*    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;*/
+    height: 500px;
+    overflow: auto;
+    border: 1px solid black;
+}
+.item {
+    font-size: 16pt;
+    border: 1px dotted gray;
+    /*margin: 5px 10px;
+    padding: 10px;*/
+    border-radius: 5px;
+}

src/App.jsx

@@ -1,12 +1,51 @@
-import { RouterProvider } from "react-router-dom";
+import { useEffect, useRef, useState } from 'react';
-import { router } from './router'
+import styles from './App.module.scss';
-import Header from './components/Header/index'
+
+const InfiniteList = () => {
+  const [items, setItems] = useState([...Array(20).keys()]); // Initial data
+  const loaderRef = useRef(null);
+
+  const loadMore = () => {
+    setItems((prev) => [...prev, ...Array(10).keys()].map((_, i) => prev.length + i));
+  };
+
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) {
+        loadMore(); // Load next batch when the loader is seen
+      }
+    });
+
+    if (loaderRef.current) observer.observe(loaderRef.current);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <ul>
+      {items.map(item => <li key={item} className={ styles.item }>Item {item}</li>)}
+      <div ref={loaderRef}>Loading more...</div>
+    </ul>
+  );
+};
 
 function App() {
+    const generatedBigDataSet = () => {
+        return Array.from({ length: 100 }, (_, index) => ({
+            id: index,
+            name: `Элемент № ${index}`,
+            value: Math.floor(Math.random() * 1000)
+        }))
+    }
+    const [data] = useState(generatedBigDataSet);
+    
 	return (
 		<>
-            <Header />
+            <div>
-			<RouterProvider router={router} />
+                <h2>Визуализация большого списка</h2>
+                <div className={ styles.container }>
+                <InfiniteList />
+                </div>
+            </div>
 		</>
 	)
 }

src/components/AdvList/index.jsx

@@ -1,49 +0,0 @@
-import styles from './index.module.css'
-import { useState, useEffect } from 'react'
-
-export default function() {
-    const [data,setData] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-    
-    useEffect(()=>{
-        const controller = new AbortController();
-        const fetchData = async () => {
-            try {
-                const response = await fetch('http://localhost:3000/advertisement', {
-                    signal: controller.signal // Link the abort signal to the fetch request
-                });
-        
-                if (!response.ok) {
-                    throw new Error(`HTTP error! Status: ${response.status}`);
-                }
-        
-                const result = await response.json();
-                setData(result);
-            } catch (err) {
-                if (err.name !== 'AbortError') {
-                    setError(err.message);
-                }
-            } finally {
-                setLoading(false);
-            }
-        };
-        fetchData();
-        return () => controller.abort();
-    },[]);
-    
-    return (
-        <>
-            <div className={styles.container}>
-            {data.map(item => <div key={item.id} className={styles.card}>
-                <h3>{item.name}</h3>
-                <div 
-                    className={styles.img}
-                    style={{backgroundImage: `url(${item.url})`}}>
-                </div>
-                <p>{item.description}</p>
-                </div>)}
-            </div>
-        </>
-    )
-}

src/components/AdvList/index.module.css

@@ -1,27 +0,0 @@
-.container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    column-gap: 10px;
-}
-.card {
-    min-width: 100px;
-    min-height: 200px;
-    /*border: 1px solid black;*/
-    border-radius: 10px;
-    box-shadow: 2px 2px 5px 2px black;    
-}
-.card h3 {
-    text-align: center;
-}
-.card p {
-    margin: 5px 10px;
-}
-.img {
-    width: 200px;
-    height: 200px;
-    border-radius: 5px;
-    background-size: cover;
-    background-position: center;
-    margin: 0 auto;
-}

src/components/Header/index.jsx

@@ -1,17 +0,0 @@
-import styles from './index.module.css'
-
-export default function() {
-    return (
-        <>
-            <header>
-                <nav>
-                    <ul className={styles.container}>
-                        <li><a href="/">Главная</a></li>
-                        <li><a href="/favorite">Избранное</a></li>
-                        <li><a href="/profile">Профиль</a></li>
-                    </ul>
-                </nav>
-            </header>
-        </>
-    )
-}

src/components/Header/index.module.css

@@ -1,7 +0,0 @@
-.container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    list-style: none;
-    column-gap: 1em;
-}

src/pages/Error.jsx

@@ -1,7 +0,0 @@
-export default function() {
-    return (
-        <>
-            <h1>Error</h1>
-        </>
-    )
-}

src/pages/Favorites.jsx

@@ -1,7 +0,0 @@
-export default function() {
-    return (
-        <>
-            <h1>Favorites</h1>
-        </>
-    )
-}

src/pages/Main.jsx

@@ -1,12 +0,0 @@
-import AdvList from '../components/AdvList/index'
-
-export default function() {
-    return (
-        <>
-        <h1>Main</h1>
-        <div>
-            <AdvList />
-        </div>
-        </>
-    )
-}

src/pages/Profile.jsx

@@ -1,7 +0,0 @@
-export default function() {
-    return (
-        <>
-        <h1>Profile</h1>
-        </>
-    )
-}

src/router.jsx

@@ -1,28 +0,0 @@
-import { createBrowserRouter } from 'react-router-dom'
-import MainPage from './pages/Main'
-import ErrorPage from './pages/Error'
-import FavoritePage from './pages/Favorites'
-import ProfilePage from './pages/Profile'
-
-export const router = createBrowserRouter([
-    {
-        path: "/",
-        element: <MainPage />,
-        errorElement: <ErrorPage />,
-        children: [
-            {
-                path: "/",
-                element: <MainPage />,
-                loader: async () => fetch("/api/dashboard-data"),
-            },
-        ]
-    },
-    {
-        path: "/favorite",
-        element: <FavoritePage />
-    },
-    {
-        path: "/profile",
-        element: <ProfilePage />
-    }    
-]);