Claude Code के साथ Infinite Scroll कैसे Implement करें

Infinite Scroll का Mechanism

Infinite scroll एक ऐसा UI pattern है जिसमें जब user page के नीचे की तरफ पहुंचता है, तो अगला data automatically load हो जाता है। Social media और news apps में यह common है, लेकिन performance और accessibility को ध्यान में रखते हुए इसे implement करना अक्सर मुश्किल हो जाता है। Claude Code के साथ, आप best practices के अनुसार implementation जल्दी build कर सकते हैं।

Intersection Observer के साथ Basic Implementation

> Intersection Observer का उपयोग करके infinite scroll के लिए React hook बनाओ।
> Loading state और error handling भी include करो।

import { useEffect, useRef, useState, useCallback } from 'react';

interface UseInfiniteScrollOptions<T> {
  fetchFn: (page: number) => Promise<{ data: T[]; hasMore: boolean }>;
  initialPage?: number;
  threshold?: number;
}

function useInfiniteScroll<T>({ fetchFn, initialPage = 1, threshold = 0.8 }: UseInfiniteScrollOptions<T>) {
  const [items, setItems] = useState<T[]>([]);
  const [page, setPage] = useState(initialPage);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [error, setError] = useState<Error | null>(null);
  const observerRef = useRef<IntersectionObserver | null>(null);

  const lastElementRef = useCallback(
    (node: HTMLElement | null) => {
      if (loading) return;
      if (observerRef.current) observerRef.current.disconnect();

      observerRef.current = new IntersectionObserver(
        (entries) => {
          if (entries[0].isIntersecting && hasMore) {
            setPage((prev) => prev + 1);
          }
        },
        { threshold }
      );

      if (node) observerRef.current.observe(node);
    },
    [loading, hasMore, threshold]
  );

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    setError(null);

    fetchFn(page)
      .then((result) => {
        if (!cancelled) {
          setItems((prev) => [...prev, ...result.data]);
          setHasMore(result.hasMore);
        }
      })
      .catch((err) => { if (!cancelled) setError(err); })
      .finally(() => { if (!cancelled) setLoading(false); });

    return () => { cancelled = true; };
  }, [page, fetchFn]);

  return { items, loading, hasMore, error, lastElementRef };
}

Component में उपयोग का उदाहरण

function ArticleList() {
  const fetchArticles = useCallback(async (page: number) => {
    const res = await fetch(`/api/articles?page=${page}&limit=20`);
    const data = await res.json();
    return { data: data.articles, hasMore: data.hasMore };
  }, []);

  const { items, loading, hasMore, error, lastElementRef } = useInfiniteScroll({
    fetchFn: fetchArticles,
  });

  return (
    <div role="feed" aria-busy={loading} aria-label="Articles list">
      {items.map((article, index) => (
        <article
          key={article.id}
          ref={index === items.length - 1 ? lastElementRef : null}
          aria-posinset={index + 1}
          aria-setsize={hasMore ? -1 : items.length}
        >
          <h2>{article.title}</h2>
          <p>{article.summary}</p>
        </article>
      ))}

      {loading && <div aria-live="polite">Loading...</div>}
      {error && <div role="alert">Error हो गया। फिर से try करें।</div>}
      {!hasMore && <p>सभी articles display हो गए।</p>}
    </div>
  );
}

Backend पर Cursor-Based Pagination

// Offset-based के बजाय cursor-based का performance बेहतर है
app.get('/api/articles', async (req, res) => {
  const limit = Math.min(Number(req.query.limit) || 20, 100);
  const cursor = req.query.cursor as string | undefined;

  const where = cursor ? { id: { gt: cursor } } : {};

  const articles = await prisma.article.findMany({
    where,
    take: limit + 1,
    orderBy: { id: 'asc' },
  });

  const hasMore = articles.length > limit;
  const data = hasMore ? articles.slice(0, -1) : articles;

  res.json({
    data,
    hasMore,
    nextCursor: hasMore ? data[data.length - 1].id : null,
  });
});

Summary

Claude Code का उपयोग करके, Intersection Observer-based infinite scroll से लेकर cursor-based API तक, सब कुछ consistently build किया जा सकता है। बड़ी मात्रा में data के rendering performance के लिए virtual scroll implementation और pagination methods की comparison के लिए pagination implementation देखें।

Intersection Observer API के details के लिए MDN Web Docs देखें।