import { useQuery, keepPreviousData } from '@tanstack/react-query';

function ProjectsList() {
  const [page, setPage] = useState(1);

  const { data, isPending, isPlaceholderData } = useQuery({
    queryKey: ['projects', page],
    queryFn: () => fetchProjects(page),
    // ✨ МАГІЯ ТУТ
    placeholderData: keepPreviousData, 
  });

  return (
    <div>
      {isPending ? (
        <div>Loading...</div>
      ) : (
        <div style={{ opacity: isPlaceholderData ? 0.5 : 1 }}>
          {data.items.map(project => (
            <div key={project.id}>{project.name}</div>
          ))}
        </div>
      )}
      
      <button onClick={() => setPage(old => old - 1)} disabled={page === 1}>
        Previous
      </button>
      <button onClick={() => setPage(old => old + 1)}>
        Next
      </button>
    </div>
  );
}

import { useInfiniteQuery } from '@tanstack/react-query';

function InfiniteFeed() {
  const {
    data, // Структура змінилась!
    error,
    fetchNextPage,
    hasNextPage,
    isFetching,
    isFetchingNextPage,
    status,
  } = useInfiniteQuery({
    queryKey: ['feed'],
    queryFn: ({ pageParam }) => fetchFeed(pageParam),
    // Початковий курсор
    initialPageParam: 0,
    // Логіка отримання наступного курсора з відповіді бекенда
    getNextPageParam: (lastPage, allPages) => {
      // lastPage — це те, що повернув останній запит
      return lastPage.nextCursor ?? undefined; 
      // Якщо повертаємо undefined, hasNextPage стане false
    },
  });

  if (status === 'pending') return <div>Loading...</div>;
  if (status === 'error') return <div>Error: {error.message}</div>;

  return (
    <div>
      {/* data.pages — це масив масивів (масив сторінок) */}
      {data.pages.map((group, i) => (
        <React.Fragment key={i}>
          {group.items.map((project) => (
            <div key={project.id} className="card">
              {project.name}
            </div>
          ))}
        </React.Fragment>
      ))}

      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetchingNextPage}
      >
        {isFetchingNextPage
          ? 'Loading more...'
          : hasNextPage
          ? 'Load More'
          : 'Nothing more to load'}
      </button>

      <div>{isFetching && !isFetchingNextPage ? 'Background Updating...' : null}</div>
    </div>
  );
}