Added toast progress

src/app/(stats)/guild/[value]/_components/members.tsx

@@ -10,6 +10,8 @@ import { playerForGuildSchema } from "@/lib/schema/player"
 import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query"
 import Image from "next/image"
 import Link from "next/link"
+import { useCallback, useEffect, useRef, useState } from "react"
+import { toast } from "sonner"
 import z from "zod"
 
 type PlayerForGuild = z.infer<typeof playerForGuildSchema>
@@ -49,9 +51,15 @@ function useMemberData(uuid: string) {
     })
 }
 
-function MemberRow({ member }: { member: Guild["guild"]["members"][number] }) {
+function MemberRow({ member, onLoad }: { member: Guild["guild"]["members"][number], onLoad: () => void }) {
     const { data: player, isLoading, isError } = useMemberData(member.uuid)
 
+    useEffect(() => {
+        if (!isLoading && (player || isError)) {
+            onLoad()
+        }
+    }, [isLoading, player, isError, onLoad])
+
     if (isLoading || (!player && !isError)) return null
     if (isError || !player) return null
 
@@ -66,6 +74,16 @@ function MemberRow({ member }: { member: Guild["guild"]["members"][number] }) {
 }
 
 function GuildMembersInternal({ members, ranks }: { members: Guild["guild"]["members"], ranks: Guild["guild"]["ranks"] }) {
+    const [loadedCount, setLoadedCount] = useState(0)
+    const hasShownToast = useRef(false)
+
+    const totalMembers = members.length
+    const TOAST_ID = "guild.members.progress"
+
+    const handleMemberLoad = useCallback(() => {
+        setLoadedCount(prev => prev + 1)
+    }, [])
+
     const sortedMembers = [...members].sort((a, b) => {
         if (a.rank === "Guild Master" && b.rank !== "Guild Master") return -1
         if (b.rank === "Guild Master" && a.rank !== "Guild Master") return 1
@@ -83,6 +101,30 @@ function GuildMembersInternal({ members, ranks }: { members: Guild["guild"]["mem
         return a.uuid.localeCompare(b.uuid)
     })
 
+    useEffect(() => {
+        if (!hasShownToast.current && totalMembers > 0) {
+            toast.loading(`Loading guild members... (0/${totalMembers})`, {
+                id: TOAST_ID,
+                duration: 1000
+            })
+            hasShownToast.current = true
+        }
+    }, [totalMembers, TOAST_ID])
+
+    useEffect(() => {
+        if (loadedCount > 0) {
+            if (loadedCount >= totalMembers) {
+                toast.success(`Loaded all ${totalMembers} guild members!`, {
+                    id: TOAST_ID
+                })
+            } else {
+                toast.loading(`Loading guild members... (${loadedCount}/${totalMembers})`, {
+                    id: TOAST_ID
+                })
+            }
+        }
+    }, [loadedCount, totalMembers, TOAST_ID])
+
     return (
         <Card>
             <CardContent>
@@ -97,7 +139,13 @@ function GuildMembersInternal({ members, ranks }: { members: Guild["guild"]["mem
                         </TableRow>
                     </TableHeader>
                     <TableBody className="space-y-4">
-                        {sortedMembers.map(member => <MemberRow key={member.uuid} member={member} />)}
+                        {sortedMembers.map(member => (
+                            <MemberRow
+                                key={member.uuid}
+                                member={member}
+                                onLoad={handleMemberLoad}
+                            />
+                        ))}
                     </TableBody>
                 </Table>
             </CardContent>
@@ -144,4 +192,3 @@ function MemberCard({ member: m }: { member: MemberWithPlayer }) {
         </TableRow>
     )
 }
-