mirror of
https://github.com/hanzoai/zod.git
synced 2026-09-24 17:04:49 +00:00
86da833722
* fix(docs): prevent FOUC on website homepage logo - Add HeroLogo component with loading states and skeleton placeholder - Implement image preloading in layout for critical resources - Add CSS optimizations to prevent flash of unstyled content - Replace direct img tags with optimized Next.js Image component - Ensures consistent 170px height during logo loading Fixes #4606 * style: fix formatting in hero-logo component * fix: remove unused ReactNode import to resolve lint error * fix: apply Biome formatting to hero-logo component - Fixed import order in hero-logo.tsx to comply with project linting rules - Ran 'pnpm format' to auto-fix formatting issues * refactor: use size-20 instead of w-20 h-20 for better Tailwind CSS optimization - Apply code review feedback to minify sizing classes - Use semantic size-* utility instead of separate width/height classes * fix(docs): resolve FOUC issue with Zod logo - Optimize HeroLogo component with smooth fade-in transitions - Remove skeleton placeholder for cleaner UX experience - Add loading state management with React useState - Set priority image loading to prevent flash - Clean up global CSS by removing unnecessary FOUC styles - Maintain fixed 170px height to prevent layout shifts - Increase transition duration to 500ms for smoother effect * fix(docs): prevent layout shift in aside logo - Create SidebarLogo component with Next.js Image optimization - Add proper sizing and loading states to prevent CLS - Update layout to use optimized component - Add preload for Zod 3 SVG logo Fixes layout shift reported in PR feedback for md+ screen sizes * Update packages/docs/components/sidebar-logo.tsx Co-authored-by: ByteEVM <[email protected]> * Update packages/docs/components/sidebar-logo.tsx Co-authored-by: ByteEVM <[email protected]> * fix(docs): eliminate CLS on aside logo for md+ screens - Fix height container with md:h-7 to prevent layout shift - Use LogoWhite for dark theme instead of Logo - Remove redundant md:w-8 classes for cleaner code - Address layout shift issue identified in PR review * Fix sizing --------- Co-authored-by: ByteEVM <[email protected]> Co-authored-by: Colin McDonnell <[email protected]>
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useState } from "react";
|
|
|
|
interface HeroLogoProps {
|
|
className?: string;
|
|
}
|
|
|
|
export function HeroLogo({ className }: HeroLogoProps) {
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
|
|
return (
|
|
<div className={`relative ${className || ""}`} style={{ height: "170px" }}>
|
|
<Image
|
|
className={`block dark:hidden mx-auto my-0! transition-opacity duration-500 ${
|
|
isLoaded ? "opacity-100" : "opacity-0"
|
|
}`}
|
|
alt="Zod logo"
|
|
src="/logo/logo-glow.png"
|
|
width={200}
|
|
height={170}
|
|
priority
|
|
quality={100}
|
|
onLoad={() => setIsLoaded(true)}
|
|
style={{ height: "100%", width: "auto" }}
|
|
/>
|
|
|
|
<Image
|
|
className={`hidden dark:block mx-auto my-0! transition-opacity duration-500 ${
|
|
isLoaded ? "opacity-100" : "opacity-0"
|
|
}`}
|
|
alt="Zod logo"
|
|
src="/logo/logo-glow.png"
|
|
width={200}
|
|
height={170}
|
|
priority
|
|
quality={100}
|
|
onLoad={() => setIsLoaded(true)}
|
|
style={{ height: "100%", width: "auto" }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|