Loading skeleton for layout.tsx

[stray shard]

Hi,
Is it possible to add loading.tsx file for layout.tsx file, so I could use a skeleton for sidebar to improve user experience while loading the shell?

[placid hornet]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[zealous charm]

yeah, possible.

there are many ways to do that

[stray shard]

yo thanks for help!

that told me so much ❤️

[cyan wharf]

i suggest reading the docs on Pages and Layout, Route Groups and Loading UI

you can also see a vercel example of instant loading states which can probably be adpated for what you're trying to do:

https://app-router.vercel.app/loading

[vast forge]

you can use Suspense to add the loading component for any server components, for example loading skeleton for layout.tsx can be implemented like below

import { Suspense } from "react";
import { cookies } from "next/headers";
import Loading from "./layout-loading";

async function getUser() {
  const nextCookies = cookies().getAll();
  await new Promise((resolve) => setTimeout(resolve, 3000));
  return { name: "John Doe", cookies: nextCookies };
}

async function LayoutToBeSuspensed({ children }: React.PropsWithChildren) {
  const user = await getUser();
  return (
    <div>
      <div>Welcome {user.name}!</div>
      {children}
    </div>
  );
}

export default function Layout({ children }: React.PropsWithChildren) {
  return (
    <Suspense fallback={<Loading />}>
      <LayoutToBeSuspensed>{children}</LayoutToBeSuspensed>
    </Suspense>
  );
}

[stray shard]

Thanks!

That’s what I was looking for