fix(site): minor nits (#7771)

mhartington · web-flow · commit 52a04bad21b2 · 2026-04-02T17:05:57.000-04:00
diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
@@ -149,8 +149,10 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     <html lang="en" className={`${inter.variable}`} suppressHydrationWarning>
       <head>
         <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
-        <Script src={WebFA} crossOrigin="anonymous" />
-
+        <script
+          src={WebFA}
+          crossOrigin="anonymous" 
+          data-auto-add-css="false" />
         <Script
           id="cookieyes"
           type="text/javascript"
diff --git a/apps/site/src/app/orm/page.tsx b/apps/site/src/app/orm/page.tsx
@@ -95,6 +95,7 @@ const twoCol = [
     other: (
       <YouTubePlayer
         autoplay={false}
+        loading="eager"
         video="EEDGwLB55bI"
         thumbnail={"/illustrations/orm/thumbnail.png"}
       />
diff --git a/apps/site/src/components/ecosystem/grid.tsx b/apps/site/src/components/ecosystem/grid.tsx
@@ -33,6 +33,7 @@ export const EcosystemGrid = () => {
       <div>
         {filters.slice(0, -1).map((filter) => (
           <div
+            key={filter}
             className={cn(
               "flex flex-col gap-12 my-12",
               activeFilter !== filter &&
@@ -69,7 +70,7 @@ export const EcosystemGrid = () => {
                           label={box.type}
                         ></Badge>
 
-                        <div className="relative after:content-[''] after:absolute after:w-full after:h-full after:z-[10000] after:left-0 after:top-0">
+                        <div className="relative after:content-[''] after:absolute after:w-full after:h-full after:z-10000 after:left-0 after:top-0">
                           <GitHubButton
                             href={`https://github.com/${box.githubRepo}`}
                             data-color-scheme="no-preference: light; light: light; dark: dark;"
diff --git a/apps/site/src/components/homepage/bento.tsx b/apps/site/src/components/homepage/bento.tsx
@@ -203,7 +203,7 @@ export const Card = ({ card, color }: CardProps) => {
           alt={card.title}
           width={1200}
           height={800}
-          loading="lazy"
+          loading="eager"
           className="px-4 z-2 pt-0 pb-0 min-w-full min-h-[60%] object-fill object-[top_left] [mask-image:linear-gradient(to_bottom,rgba(0,0,0,1)_60%,transparent_90%)] [-webkit-mask-image:linear-gradient(to_bottom,rgba(0,0,0,1)_60%,transparent_90%)]"
         />
       )}
diff --git a/apps/site/src/components/orm/info-stats.tsx b/apps/site/src/components/orm/info-stats.tsx
@@ -1,7 +1,14 @@
 "use client";
-import { FunctionComponent } from "react";
-import AnimatedNumbers from "react-animated-numbers";
+import { type CSSProperties, FunctionComponent } from "react";
 import { cn } from "@/lib/cn";
+
+const numberStyle = {
+  fontStyle: "normal",
+  fontWeight: 700,
+  lineHeight: "100%",
+  letterSpacing: "-0.02em",
+} satisfies CSSProperties;
+
 export const InfoStats: FunctionComponent<{
   icon?: any;
   number?: string;
@@ -12,7 +19,7 @@ export const InfoStats: FunctionComponent<{
 
   return (
     match && (
-      <div className="relative flex items-center cursor-default text-foreground-orm-strong w-full sm:w-fit sm:mx-auto [&>div]:first:flex [&>div]:first:justify-center [&>div]:first:items-center [&>div]:first:mb-[10px] font-sans-display flex-col justify-center items-center">
+      <div className="relative flex cursor-default text-foreground-orm-strong w-full sm:w-fit sm:mx-auto [&>div]:first:flex [&>div]:first:justify-center [&>div]:first:items-center [&>div]:first:mb-[10px] font-sans-display flex-col justify-center items-center">
         {link && (
           <a
             href={link}
@@ -28,15 +35,7 @@ export const InfoStats: FunctionComponent<{
               marginTop: `4px`,
             }}
           />
-          <AnimatedNumbers
-            animateToNumber={Number(match[1])}
-            fontStyle={{
-              fontStyle: "normal",
-              fontWeight: 700,
-              lineHeight: "100%",
-              letterSpacing: "-0.02em",
-            }}
-          />
+          <span style={numberStyle}>{match[1]}</span>
           <span className="-translate-y-1">{match[2]}</span>
         </div>
         <span className="font-mono text-foreground-neutral-weak text-sm">
diff --git a/apps/site/src/components/postgres.tsx b/apps/site/src/components/postgres.tsx
@@ -69,23 +69,23 @@ export function PostgresTabs({ data }: { data: HowSectionData }) {
                             alt={body.title}
                             width={1200}
                             height={800}
-                            loading="lazy"
+                            loading="eager"
                             className="hidden lg:dark:block md:max-h-83"
                           />
                           <Image
                             src={`${body.image}_tablet.svg`}
                             alt={body.title}
                             width={1200}
                             height={800}
-                            loading="lazy"
+                            loading="eager"
                             className="hidden sm:dark:block lg:dark:hidden md:max-h-83"
                           />
                           <Image
                             src={`${body.image}_mobile.svg`}
                             alt={body.title}
                             width={1200}
                             height={800}
-                            loading="lazy"
+                            loading="eager"
                             className="hidden dark:block sm:dark:hidden md:max-h-83"
                           />
 
@@ -95,23 +95,23 @@ export function PostgresTabs({ data }: { data: HowSectionData }) {
                             alt={body.title}
                             width={1200}
                             height={800}
-                            loading="lazy"
+                            loading="eager"
                             className="hidden lg:block dark:hidden md:max-h-83"
                           />
                           <Image
                             src={`${body.image}_tablet_light.svg`}
                             alt={body.title}
                             width={1200}
                             height={800}
-                            loading="lazy"
+                            loading="eager"
                             className="hidden sm:block lg:hidden dark:hidden md:max-h-83"
                           />
                           <Image
                             src={`${body.image}_mobile_light.svg`}
                             alt={body.title}
                             width={1200}
                             height={800}
-                            loading="lazy"
+                            loading="eager"
                             className="block sm:hidden dark:hidden md:max-h-83"
                           />
                         </>
diff --git a/packages/ui/src/components/youtube-player.tsx b/packages/ui/src/components/youtube-player.tsx
@@ -11,6 +11,7 @@ export const YouTubePlayer = ({
   autoplay = false,
   overlay,
   playOnView = false,
+  loading = "lazy",
 }: {
   className?: string;
   serverlessTalk?: boolean;
@@ -19,6 +20,7 @@ export const YouTubePlayer = ({
   playOnView?: boolean;
   autoplay?: boolean;
   overlay?: string;
+  loading?: "eager" | "lazy";
 }) => {
   const [playing, setPlaying] = useState(false);
   const [shouldAutoplay, setShouldAutoplay] = useState(autoplay);
@@ -97,6 +99,7 @@ export const YouTubePlayer = ({
               serverlessTalk && "absolute top-0 left-0 w-full h-full",
             )}
             height="287"
+            loading={loading}
             src={`https://www.youtube.com/embed/${video}${getAutoplayParams()}`}
             title="YouTube Video"
             allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; autoplay"
