Need help for Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.

[ajmeraaxesh]

Hi all,

I am looking for guidance on how do I resolve this issue / warning which causes a flash of unstyled content on "Firefox developer edition"
Can anyone please suggest what can I do to resolve this flash issue?

In my root.tsx

import tailwindStylesheet from "~/tailwind.css?url";

export const links: LinksFunction = () => {
  const links = [
    { rel: "preload", href: tailwindStylesheet, as: "style", crossOrigin: "anonymous" as const }, // Add this line
    { rel: "stylesheet", href: tailwindStylesheet, precedence: "high" },
    { rel: "preload", href: "/fonts/Lato-Regular.ttf", as: "font", type: "font/ttf", crossOrigin: "anonymous" as const },
    { rel: "preload", href: "/fonts/Lato-Light.ttf", as: "font", type: "font/ttf", crossOrigin: "anonymous" as const },
    { rel: "preload", href: "/fonts/Lato-Medium.ttf", as: "font", type: "font/ttf", crossOrigin: "anonymous" as const },
  ]


  return links;
};

[ajmeraaxesh]

@jacobparis @pcattori can anyone please guide me?

[M-Tawfiq]

This issue related to Firefox browser, try another one.