hello am I doing something wrong here? because my skeletons arent showing upexport default function DashboardPage() { return }> } async function GuildCardsWrapper() { const menuGuilds = await getMenuGuilds(); return } interface GuildCardsProps { data?: Awaited >; loading: boolean; } function GuildCards(props: GuildCardsProps) { const {data, loading} = props; console.log(loading) return {data?.map((guild) => ( ))} }

Suspense a component not working

Unanswered

Wool sower gall maker posted this in #help-forum

Wool sower gall makerOP

2024-04-30T15:02:51.809Z

hello am I doing something wrong here? because my skeletons arent showing up

export default function DashboardPage() {
    return <div className="container pt-4">
        <Suspense fallback={<GuildCards loading={true}/>}>
            <GuildCardsWrapper/>
        </Suspense>
    </div>
}
async function GuildCardsWrapper() {
    const menuGuilds = await getMenuGuilds();
    return <GuildCards loading={false} data={menuGuilds}/>
}

interface GuildCardsProps {
    data?: Awaited<ReturnType<typeof getMenuGuilds>>;
    loading: boolean;
}

function GuildCards(props: GuildCardsProps) {
    const {data, loading} = props;
    console.log(loading)

    return <div className="w-full py-8 gap-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        {data?.map((guild) => (
            <GuildCard key={guild.id} id={guild.id} name={guild.name} icon={guild.icon}
                       members={guild.approximate_member_count} bot={guild.bot} owner={guild.owner} loading={loading}
                       className="flex bg-cover w-full h-[170px] items-center justify-center"/>
        ))}
    </div>
}

1 Reply

Wool sower gall makerOP

2024-04-30T15:06:06.879Z

function GuildCard({
                       id, name, icon, members, bot, owner, loading, className
                   }: GuildCardProps) {
    return (
        <div className="flex flex-col gap-y-2">
            {loading &&
                <>
                    <Card className={className}>
                        <div className="w-full h-full flex rounded-lg justify-center items-center backdrop-blur-md">
                            <Skeleton className="h-20 w-20 rounded-full ring-2 ring-accent ">
                            </Skeleton>
                        </div>
                    </Card>
                    <div className="flex items-center justify-between">
                        <div className="flex flex-col gap-y-2 w-full">
                            <Skeleton className="h-6 w-2/5"/>
                            <Skeleton className="h-4 w-1/5"/>
                        </div>
                        <Skeleton className="h-10 w-2/4"/>
                    </div>
                </>
            }
            {!loading &&
                <>
                    <Card className={cn("bg-cover bg-center backdrop-blur-sm", className)}
                          style={icon ? {backgroundImage: `url(${icon})`} : {}}>
                    </Card>
                </>
            }

        </div>
    )
}