Image Flickering on page change

Answered

Arinji posted this in #help-forum

2024-02-20T15:59:02.000Z

const montserrat = Montserrat({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const parsedOptions = await unstable_cache(
    async () => {
      const data = await fetch(
        `${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/article`,
        {
          headers: {
            Authorization: `users API-Key ${process.env.API_KEY}`,
          },
        }
      );

      const options = await data.json();
      const parsedOptions: SearchSchemaType[] = options.docs.map(
        (option: any) => {
          const parse = SearchSchema.safeParse(option);
          if (parse.success) return parse.data as SearchSchemaType;
        }
      );
      return parsedOptions;
    },
    ["key"],
    { tags: ["searchTAG"], revalidate: false }
  )();

  return (
    <html lang="en">
      <body className={`${montserrat.className} bg-shades-dark`}>
        <div className="w-full   bg-shades-dark h-[180px] relative flex flex-col items-center justify-center">
          <Image
            fill
            src="/banner.png"
            alt="Banner"
            sizes="100vw"
            className="w-full h-full absolute object-cover object-[90%_90%] "
          />
          <div className="...."></div>
          <div className="...">
            <Image
              src="/logo.webp"
              alt="Logo"
              width={100}
              height={100}
              className=" absolute top-0 left-0 object-contain"
            />
            <SearchBar options={parsedOptions} />
        <div className="w-full h-full flex flex-col items-center justify-center">
          {children}
        </div>
      </body>
    </html>
  );
}