use a skeleton when rendering a component

was wondering if i could add a skeleton for my navbar client component that is in my layout.tsx not sure how to do this

2 Replies

export default function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
   <section>
      <Suspense fallback={<Skeleton />}>
         <NavbarServerComponent />
      <Suspense />
      {children}
   </section>);
}

export default function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
   <section>
      <Suspense fallback={<Skeleton />}>
         <NavbarServerComponent />
      <Suspense />
      {children}
   </section>);
}

wait client component whatever data fetching library you are using should give you an is loading state just conditonally render the skeleton based of isLoading

export default function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
   <section>
      <Navbar />
      {children}
   </section>);
}

"use client";
function Navbar() {
   const {data, isLoading} = useNavbarDataQuery();
   return isLoading ? <Skeleton /> : <h1>{data.title}</h1>;
}

export default function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
   <section>
      <Navbar />
      {children}
   </section>);
}

"use client";
function Navbar() {
   const {data, isLoading} = useNavbarDataQuery();
   return isLoading ? <Skeleton /> : <h1>{data.title}</h1>;
}

EliteOP•2y ago

ok so i have a navbar. it has 2 buttons. but they take like 1 second to load on my root layout.tsx which is a server component, I want to have a loading animation when rendering the navbar. the navbar is a client component and i dont fetch any sort of data its just clerk components with css

Gaming

Programming

use a skeleton when rendering a component