added infinite scrolling to frontend and displaying vote information

discord_verificiation/playtime-frontend/lib/useInfiniteScroll.ts

@@ -0,0 +1,32 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+/**
+ * Calls `onIntersect` when the returned sentinel ref becomes visible near
+ * the bottom of the viewport — the standard "load more as you scroll"
+ * pattern, via IntersectionObserver rather than a scroll listener (cheaper,
+ * no manual throttling needed).
+ */
+export function useInfiniteScroll(onIntersect: () => void, enabled: boolean) {
+  const sentinelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const el = sentinelRef.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) onIntersect();
+      },
+      { rootMargin: '400px' }, // start loading a bit before the sentinel is actually on screen
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled, onIntersect]);
+
+  return sentinelRef;
+}