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]>
24 lines
696 B
TypeScript
24 lines
696 B
TypeScript
"use client";
|
|
|
|
import Image, { type ImageProps } from "next/image";
|
|
import { useState } from "react";
|
|
|
|
export function SidebarLogo({ src, alt, width = 24, height = 24, className = "h-5" }: ImageProps) {
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
|
|
return (
|
|
<div className="relative" style={{ width: `${width}px`, height: `${height}px` }}>
|
|
<Image
|
|
className={`transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"} ${className}`}
|
|
alt={alt}
|
|
src={src}
|
|
width={width}
|
|
height={height}
|
|
quality={100}
|
|
onLoad={() => setIsLoaded(true)}
|
|
style={{ width: "auto", height: "100%" }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|