Improve stylesheet loading` (#202)

* Refactor DocsLayout: Remove unused clientLoader and update stylesheet link precedence

* Update stylesheet imports in root and docsearch components for improved loading

Author: brookslybrand

app/modules/docsearch.tsx

@@ -16,6 +16,8 @@ import {
 } from "@docsearch/react";
 import type { HeaderData } from "~/components/docs-header/data.server";
 
+import docsearchCss from "~/styles/docsearch.css?url";
+
 let docSearchProps = {
   appId: "RB6LOUCOL0",
   indexName: "reactrouter",
@@ -71,6 +73,7 @@ export function DocSearch({ children }: { children: React.ReactNode }) {
 
   return (
     <DocSearchContext value={contextValue}>
+      <link rel="stylesheet" href={docsearchCss} precedence="high" />
       {children}
       {isOpen
         ? createPortal(

app/pages/docs-layout.tsx

@@ -1,4 +1,3 @@
-import { preload } from "react-dom";
 import { Outlet, redirect } from "react-router";
 import classNames from "classnames";
 
@@ -77,11 +76,6 @@ export async function loader({ request, params, context }: Route.LoaderArgs) {
   };
 }
 
-export async function clientLoader({ serverLoader }: Route.ClientLoaderArgs) {
-  preload(docsCss, { as: "style" });
-  return await serverLoader();
-}
-
 export default function DocsLayout({ loaderData }: Route.ComponentProps) {
   const { menu, header } = loaderData;
 
@@ -96,7 +90,7 @@ export default function DocsLayout({ loaderData }: Route.ComponentProps) {
 
   return (
     <>
-      <link rel="stylesheet" href={docsCss} />
+      <link rel="stylesheet" href={docsCss} precedence="high" />
       <div className="[--header-height:theme(spacing.16)] [--nav-width:theme(spacing.72)] lg:m-auto lg:max-w-[90rem]">
         <div className="sticky top-0 z-20">
           <Header />

app/root.tsx

@@ -18,9 +18,7 @@ import { isHost } from "./modules/http-utils/is-host";
 import iconsHref from "~/icons.svg";
 import { DocSearch } from "./modules/docsearch";
 
-import "~/styles/tailwind.css";
-import "@docsearch/css/dist/style.css";
-import "~/styles/docsearch.css";
+import tailwindCss from "~/styles/tailwind.css?url";
 import type { Route } from "./+types/root";
 
 import { ensureSecure } from "~/modules/http-utils/ensure-secure";
@@ -77,6 +75,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
           type="image/png"
           media="(prefers-color-scheme: dark)"
         />
+        <link rel="stylesheet" href={tailwindCss} precedence="high" />
         <Meta />
         <Links />
       </head>

app/styles/docsearch.css

@@ -1,3 +1,5 @@
+@import "@docsearch/css/dist/style.css";
+
 /* this was copy/paste/modified from @docsearch/css/dist/_variables.css */
 :root {
   &:where(.dark) {