Next.js Discord

Discord Forum

Loading UI not showing

Unanswered
Aditya Kirad posted this in #help-forum
Open in Discord
Aditya KiradOP
hey folks I'm using the T3 stack with app router I'm fetching some data and on the basis of data I'm generating the component I have wrapped that in a Suspense and I provided a fallback also but until the components aren't ready the loading UI doesn't shows up the page loads with full content here is my code 
import { redirect } from "next/navigation";
import { Suspense } from "react";
import { getServerAuthSession } from "@/server/auth";
import { api } from "@/trpc/server";
import { Container, Grid, Heading } from "@radix-ui/themes";
import GuildCard, { LoadingGuildCard } from "@/app/_components/GuildCard";

export default async function Page() {
  const session = await getServerAuthSession();
  if (!session || !session.user) {
    redirect("/");
  }
  const discord = await api.discord.getGuilds.query({
    userId: session.user.id,
  });

  return (
    <Container size="3" mx="4">
      <Heading className="mt-rx-8 text-center">Select a server</Heading>
      <Grid className="mt-rx-8 gap-rx-4 md:grid-cols-2 lg:grid-cols-3">
        <Suspense fallback={<LoadingGuildCard />}>
          {discord?.guilds?.map((guild) => (
            <GuildCard key={guild.id} guild={guild} />
          ))}
        </Suspense>
      </Grid>
    </Container>
  );
}

5 Replies

Roseate Tern
the <Suspense> boundary should hold your fetching data, with your current code, when a component is mount, it will handle fetching data FIRST, this block the rest of the file from executing, then moving to binding HTML component

Your component should look like this:

import { redirect } from "next/navigation";
import { Suspense } from "react";
import { getServerAuthSession } from "@/server/auth";
import { api } from "@/trpc/server";
import { Container, Grid, Heading } from "@radix-ui/themes";
import GuildCard, { LoadingGuildCard } from "@/app/_components/GuildCard";

export default function Page() {
  return (
    <Container size="3" mx="4">
      <Heading className="mt-rx-8 text-center">Select a server</Heading>
      <Grid className="mt-rx-8 gap-rx-4 md:grid-cols-2 lg:grid-cols-3">
        <Suspense fallback={<LoadingGuildCard />}>
            <MainContent />          
        </Suspense>
      </Grid>
    </Container>
  );
}


const MainContent = async () => { 
  const session = await getServerAuthSession();
  if (!session || !session.user) {
    redirect("/");
  }
  const discord = await api.discord.getGuilds.query({
    userId: session.user.id,
  }); 

  return (
    {discord?.guilds?.map((guild) => (
      <GuildCard key={guild.id} guild={guild} />
    ))}
  )
}
Roseate Tern
also, how do you have your code colored
@Roseate Tern also, how do you have your code colored
Aditya KiradOP
you don't know this it's really simple you just have to pass the syntax you are using in triple backticks for eg here I was pasting a tsx code so you have to just do this
```tsx //code here ```
Aditya KiradOP
no problem