Next.js Discord

Discord Forum

loading doesn't wanna work.

Unanswered
Lionhead posted this in #help-forum
Open in Discord
LionheadOP
import LoginCard from "@/components/auth/login-card";
import {auth} from "@/auth";
import LogOut from "@/components/auth/log-out";
import Stats from "@/components/dash/stats";
import Profile from "@/components/dash/profile";
import React, {Suspense} from "react";

export default async function Home() {
    const session = await auth();

    function Login() {
        if (!session) {
            return (
                <div>
                    <LoginCard/>
                </div>
            )
        } else return null;
    }

        function Logout() {
            if (session) {
                return (
                    <div>
                        <LogOut />
                    </div>
                )
            }
            else return null;
        }

  return (
    <main className="flex flex-col gap-2 justify-center items-center h-screen bg-slate-400/40">
        <Login />
        <Logout />
        <Suspense fallback={<p>Loading feed...</p>}>
        <Profile session={session} />
        </Suspense>
        <Stats />
    </main>
  );
}


as you can see, i have supsense for profile. But i cannot see it as well on slow 3G. I just builded app and have the same.

14 Replies

LionheadOP
someone maybe?
Julienng
Hi! What is <Profile> component doing ?
LionheadOP
Its getting session info from page.tsx
like its returning card with profile, name
Julienng
Are you doing any async / await call in there ?
LionheadOP
nope
import {Card, CardDescription, CardFooter, CardHeader, CardTitle} from "@/components/ui/card";
import Image from "next/image";

export default function Profile(session: any) {
    if (!session.session) return null;
    return (
            <Card>
                <CardHeader>
                    <CardTitle>
                        <div className="flex items-center gap-2 justify-center">
                            <Image src={session.session.user.image} alt={session.session.user.name} width={50} height={50} className="rounded-full" />
                            Cześć {session.session.user.name},
                        </div>
                    </CardTitle>
                </CardHeader>
                <CardDescription className="text-center text-md text-black justify-center">
                    Twoja ranga: <span className="bg-emerald-300 w-fit mx-auto p-1 rounded-xl">
                        {session.session.user.role}
                </span>
                </CardDescription>
                <CardFooter>

                </CardFooter>
            </Card>
    )
}
Julienng
This is why you don't see the suspense loader
Julienng
If your profile component is doing any async stuff, you will see a suspense fallback render
you can see the code app/profile/page.tsx
LionheadOP
so for example i must fetch session there?
Julienng
The session, or any data you need to fetch for the profile page