chore: prefetch lcp image

mrgnlabs · Nov 30, 2023 · 1d188c1 · 1d188c1 · vercel · Nov 30, 2023
1 parent 6dc9926
commit 1d188c1
Showing 1 changed file with 18 additions and 12 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/common/PageHeader.tsx b/apps/marginfi-v2-ui/src/components/common/PageHeader.tsx
@@ -1,4 +1,5 @@
 import { FC, ReactNode } from "react";
+import Head from "next/head";
 import { useUiStore } from "~/store";
 import { WalletButton } from "./Wallet";
 import { Mobile } from "~/mediaQueries";
@@ -12,23 +13,28 @@ const PageHeader: FC<PageHeaderProps> = ({ children }) => {
   const [isFetchingData] = useUiStore((state) => [state.isFetchingData]);
 
   return (
-    <div className="flex w-full h-[90px] sm:h-[60px] justify-center items-center border-y bg-[url('/WaveBG3.png')]">
-      <div className="w-full xl:w-4/5 px-4 xl:max-w-7xl flex flex-row justify-between items-center border-solid font-aeonik font-normal text-2xl sm:text-3xl">
-        <div className="flex gap-4 justify-center items-center">
+    <>
+      <Head>
+        <link rel="preload" as="image" href="/WaveBG3.png" type="image/png" />
+      </Head>
+      <div className="flex w-full h-[90px] sm:h-[60px] justify-center items-center border-y bg-[url('/WaveBG3.png')]">
+        <div className="w-full xl:w-4/5 px-4 xl:max-w-7xl flex flex-row justify-between items-center border-solid font-aeonik font-normal text-2xl sm:text-3xl">
+          <div className="flex gap-4 justify-center items-center">
+            <Mobile>
+              <div className="ml-[4px]">
+                <IconMrgn size={18} className={`${isFetchingData ? "animate-pulse" : ""}`} />
+              </div>
+            </Mobile>
+            <div>{children}</div>
+          </div>
           <Mobile>
-            <div className="ml-[4px]">
-              <IconMrgn size={18} className={`${isFetchingData ? "animate-pulse" : ""}`} />
+            <div className="flex justify-center items-center gap-3">
+              <WalletButton />
             </div>
           </Mobile>
-          <div>{children}</div>
         </div>
-        <Mobile>
-          <div className="flex justify-center items-center gap-3">
-            <WalletButton />
-          </div>
-        </Mobile>
       </div>
-    </div>
+    </>
   );
 };