refactor: update skeleton components to use Skeleton UI component for consistency and improved styling

Author: jakejarvis

components/domain/domain-search-skeleton.tsx

@@ -1,3 +1,4 @@
+import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
 
 export type DomainSearchSkeletonVariant = "sm" | "lg";
@@ -14,23 +15,23 @@ export function DomainSearchSkeleton({
       <div className="relative w-full flex-1">
         <div
           className={cn(
-            "flex w-full animate-pulse items-center gap-3 rounded-lg bg-muted/30 px-4 ring-1 ring-border/60",
+            "flex w-full animate-pulse items-center gap-3 rounded-lg bg-muted/30 px-3 ring-1 ring-border/60",
             variant === "lg" ? "h-12" : "h-10",
           )}
         >
           {/* Search icon placeholder */}
-          <div className="size-5 shrink-0 rounded bg-muted/50" />
+          <Skeleton className="size-5 shrink-0" />
 
           {/* Input text placeholder */}
-          <div className="h-4 flex-1 rounded bg-muted/50" />
+          <Skeleton className="h-4 flex-1" />
 
           {/* Right side addon placeholder */}
           {variant === "lg" ? (
             // Inspect button placeholder (homepage)
-            <div className="h-8 w-20 shrink-0 rounded-md bg-muted/50" />
+            <Skeleton className="h-8 w-20 shrink-0" />
           ) : (
             // Keyboard shortcut placeholder (header)
-            <div className="hidden h-6 w-14 shrink-0 rounded border bg-muted/50 sm:block" />
+            <Skeleton className="hidden h-6 w-14 shrink-0 sm:block" />
           )}
         </div>
       </div>

components/domain/domain-suggestions-skeleton.tsx

@@ -1,3 +1,4 @@
+import { Skeleton } from "@/components/ui/skeleton";
 import { MAX_HISTORY_ITEMS } from "@/lib/constants";
 import { cn } from "@/lib/utils";
 
@@ -11,18 +12,18 @@ export function DomainSuggestionsSkeleton({
   return (
     <div className={cn("relative", className)}>
       <div className="overflow-hidden py-0.5">
-        <div className="flex gap-2 px-0.5 pb-2">
+        <div className="flex gap-2 pl-0.5">
           {Array.from({ length: count }).map((_, i) => (
             <div
               // biome-ignore lint/suspicious/noArrayIndexKey: fine for skeletons
               key={i}
               className="flex h-8 flex-shrink-0 animate-pulse items-center gap-2 rounded-md bg-muted/15 px-3 ring-1 ring-border/60"
             >
               {/* Favicon placeholder */}
-              <div className="size-4 rounded bg-muted/50" />
+              <Skeleton className="size-4" />
               {/* Domain text placeholder with varying widths */}
-              <div
-                className="h-3.5 rounded bg-muted/50"
+              <Skeleton
+                className="h-3.5"
                 style={{
                   width: `${80 + ((i * 20) % 60)}px`,
                 }}

components/home-hero.tsx

@@ -62,13 +62,13 @@ export function HomeHero({ intervalMs = 2400, className }: HomeHeroProps) {
         Inspect any domain’s
       </span>
       <motion.span
-        className="ml-2.5 inline-flex items-center rounded-lg bg-muted/70 px-2 py-0.5 text-foreground shadow-sm ring-1 ring-border/60 backdrop-blur supports-[backdrop-filter]:backdrop-blur-md sm:rounded-xl sm:px-3 sm:py-1"
+        className="ml-2.5 inline-flex items-center rounded-lg bg-muted/70 px-2 py-0.5 text-foreground shadow-sm ring-1 ring-border/60 backdrop-blur will-change-[width,transform] supports-[backdrop-filter]:backdrop-blur-md sm:rounded-xl sm:px-3 sm:py-1"
         aria-live="polite"
         aria-atomic="true"
         initial={false}
         animate={{ width: measuredWidth ?? undefined }}
         transition={{ duration: 0.85, ease: [0.22, 1, 0.36, 1] }}
-        style={{ willChange: "width", width: measuredWidth ?? undefined }}
+        style={{ width: measuredWidth ?? undefined }}
       >
         <span className="relative flex h-[1.15em] w-full items-center overflow-hidden whitespace-nowrap">
           <span className="-translate-x-1/2 absolute left-1/2">
@@ -83,7 +83,7 @@ export function HomeHero({ intervalMs = 2400, className }: HomeHeroProps) {
                   ease: [0.22, 1, 0.36, 1],
                   duration: 0.5,
                 }}
-                className="inline-block transform-gpu will-change-transform"
+                className="inline-block will-change-[transform,opacity]"
               >
                 {rotatingWords[index]}
               </motion.span>