#Layout + search params

4 messages · Page 1 of 1 (latest)

deep girder
#

Hi.
I have a layout where I have background component.

type Props = {
  children: React.ReactNode;
};

export default async function Layout({ children }: Props) {
  return (
    <div className="grid min-h-[100dvh] grid-cols-1 grid-rows-[min-content_1fr_min-content]">
      <SiteHeader />

      <div className="col-start-1 row-start-2 row-end-3 flex flex-1 flex-col justify-center px-4 pb-10 pt-14">
        <div className="flex w-full flex-col">{children}</div>

        <SiteFooter className="mt-6" />
      </div>
      <BackgroundGradient className="col-start-1 row-start-2 row-end-3" />
    </div>
  );
}

the background component can have different color depending on the result of a fetch.
The fetch is used with search params, so actually I do it in a page but I need this background in multiple page.

export default async function Page({
  params,
  searchParams,
}: {
  params: Params;
  searchParams: SearchParams;
}) {
  let branding: RegisterBranding | null = null;

  if (searchParams.token) {
    const res = await getRegisterDataFromToken(searchParams.token);

    if (res.data?.token.branding) {
      branding = res.data?.token.branding;
    }
  }

  return (
    // ...
  );
}

I know that I can create a client component and fetch client side on the layout, but I guess there will some sort of "flash".

the only solution that on my mind is to create a page component with the background and pass props to the component but then I will need to use it in each page.

Do you have any simpler solution maybe ? thx

midnight gobletBOT
#
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)

ripe lance
#

You can set a cookie for the color and get that cookie in the layout serverside. Then you dont have a flash and query from everywhere without taking care of props.

deep girder
#

oh, I feel a bit dumb because I have already a cookie session where I store those data. Thx for you answer ❤️ .Really appreciate it.