feat: update notification retrieval to use pagination and enhance loading experience

app/Http/Controllers/Api/NotificationController.php

@@ -14,8 +14,7 @@ public function index(Request $request): JsonResponse
         $notifications = $request->user()
             ->notifications()
             ->orderBy('created_at', 'desc')
-            ->limit(20)
+            ->paginate(15);
-            ->get();
 
         return response()->json($notifications);
     }

resources/js/components/notifications/notification-bell.tsx

@@ -1,12 +1,11 @@
 import { router } from '@inertiajs/react';
-import { Bell, Check, CheckCheck, Trash2 } from 'lucide-react';
+import { Bell, Check, CheckCheck, Loader2, Trash2 } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
     DropdownMenu,
     DropdownMenuContent,
-    DropdownMenuItem,
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
@@ -20,12 +19,23 @@ interface Notification {
     created_at: string;
 }
 
+interface PaginatedResponse {
+    data: Notification[];
+    current_page: number;
+    last_page: number;
+    next_page_url: string | null;
+}
+
 export function NotificationBell() {
     const [notifications, setNotifications] = useState<Notification[]>([]);
     const [unreadCount, setUnreadCount] = useState(0);
     const [isOpen, setIsOpen] = useState(false);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [lastPage, setLastPage] = useState(1);
+    const [loadingMore, setLoadingMore] = useState(false);
     const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
     const mountedRef = useRef(true);
+    const sentinelRef = useRef<HTMLDivElement | null>(null);
 
     useEffect(() => {
         mountedRef.current = true;
@@ -52,23 +62,41 @@ export function NotificationBell() {
         }
     }, []);
 
-    const fetchNotifications = useCallback(async () => {
+    const fetchNotifications = useCallback(async (page: number = 1) => {
         try {
-            const response = await fetch('/api/notifications', {
+            const response = await fetch(`/api/notifications?page=${page}`, {
                 headers: {
                     'X-Requested-With': 'XMLHttpRequest',
                 },
             });
 
             if (response.ok && mountedRef.current) {
-                const data = await response.json();
+                const data: PaginatedResponse = await response.json();
-                setNotifications(data);
+
+                if (page === 1) {
+                    setNotifications(data.data);
+                } else {
+                    setNotifications((prev) => [...prev, ...data.data]);
+                }
+
+                setCurrentPage(data.current_page);
+                setLastPage(data.last_page);
             }
         } catch {
             // Silently fail
         }
     }, []);
 
+    const fetchNextPage = useCallback(async () => {
+        if (loadingMore || currentPage >= lastPage) {
+return;
+}
+
+        setLoadingMore(true);
+        await fetchNotifications(currentPage + 1);
+        setLoadingMore(false);
+    }, [loadingMore, currentPage, lastPage, fetchNotifications]);
+
     const markAsRead = useCallback(async (id: number) => {
         try {
             await fetch(`/api/notifications/${id}/read`, {
@@ -153,11 +181,34 @@ export function NotificationBell() {
 
     useEffect(() => {
         if (isOpen) {
-            // eslint-disable-next-line react-hooks/set-state-in-effect -- fetch on dropdown open is safe
+            // eslint-disable-next-line react-hooks/set-state-in-effect -- reset pagination on open is safe
-            void fetchNotifications();
+            setCurrentPage(1);
+            setLastPage(1);
+            void fetchNotifications(1);
+        } else {
+            setNotifications([]);
         }
     }, [isOpen, fetchNotifications]);
 
+    useEffect(() => {
+        if (!isOpen || !sentinelRef.current) {
+return;
+}
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                if (entries[0].isIntersecting && !loadingMore && currentPage < lastPage) {
+                    void fetchNextPage();
+                }
+            },
+            { rootMargin: '100px' },
+        );
+
+        observer.observe(sentinelRef.current);
+
+        return () => observer.disconnect();
+    }, [isOpen, loadingMore, currentPage, lastPage, fetchNextPage]);
+
     return (
         <DropdownMenu onOpenChange={setIsOpen}>
             <DropdownMenuTrigger asChild>
@@ -178,7 +229,7 @@ export function NotificationBell() {
                     <span className="sr-only">Notifikasi</span>
                 </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="max-h-[350px] w-80">
+            <DropdownMenuContent align="end" className="max-h-[350px] w-80 overflow-y-auto">
                 <div className="flex items-center justify-between border-b px-4 py-2">
                     <span className="text-sm font-semibold">Notifikasi</span>
                     <div className="flex items-center gap-1">
@@ -215,7 +266,8 @@ export function NotificationBell() {
                         Tidak ada notifikasi
                     </div>
                 ) : (
-                    notifications.map((notification) => (
+                    <>
+                        {notifications.map((notification) => (
                             <div key={notification.id}>
                                 <div
                                     className={`flex items-start gap-2 px-4 py-3 ${
@@ -231,6 +283,7 @@ export function NotificationBell() {
                                                 if (!notification.is_read) {
                                                     void markAsRead(notification.id);
                                                 }
+
                                                 router.visit(notification.url);
                                             }
                                         }}
@@ -293,7 +346,23 @@ export function NotificationBell() {
                                 </div>
                                 <DropdownMenuSeparator />
                             </div>
-                    ))
+                        ))}
+
+                        {/* Sentinel for infinite scroll */}
+                        <div ref={sentinelRef} className="px-4 py-2">
+                            {loadingMore && (
+                                <div className="flex items-center justify-center gap-2 text-xs text-muted-foreground">
+                                    <Loader2 className="h-3 w-3 animate-spin" />
+                                    <span>Memuat lainnya...</span>
+                                </div>
+                            )}
+                            {!loadingMore && currentPage >= lastPage && notifications.length > 0 && (
+                                <p className="text-center text-xs text-muted-foreground">
+                                    Semua notifikasi sudah dimuat
+                                </p>
+                            )}
+                        </div>
+                    </>
                 )}
             </DropdownMenuContent>
         </DropdownMenu>