michal.cukrowski/j_kedzierski
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(hero): remove artificial JS fade-in delay for LCP image

Browse Source
This commit is contained in:
MichalC
2026-09-18 00:19:54 +02:00
parent f00082a5e9
commit 3b4be7907f
1 changed files with 2 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/blocks/Hero/Component.tsx
+2 -6
View File
@@ -1,5 +1,5 @@
'use client' 'use client'
import React, { useState } from 'react' import React from 'react'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import type { Page, Media } from '../../payload-types' import type { Page, Media } from '../../payload-types'
import Link from 'next/link' import Link from 'next/link'
@@ -43,7 +43,6 @@ export const HeroBlock: React.FC<Props> = ({
floatingStat, floatingStat,
whatsappNumber, whatsappNumber,
}) => { }) => {
const [imageLoaded, setImageLoaded] = useState(false)
const whatsappLink = whatsappNumber ? `https://wa.me/${whatsappNumber}` : '#' const whatsappLink = whatsappNumber ? `https://wa.me/${whatsappNumber}` : '#'
const heroMedia = typeof image === 'object' && image !== null ? (image as Media) : null const heroMedia = typeof image === 'object' && image !== null ? (image as Media) : null
@@ -69,10 +68,7 @@ export const HeroBlock: React.FC<Props> = ({
fill fill
priority priority
sizes="100vw" sizes="100vw"
onLoad={() => setImageLoaded(true)} className="object-cover object-center"
className={`object-cover object-center transition-all duration-1000 ${
imageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-105'
}`}
/> />
{/* Ciemny gradient pod spodem, by biały tekst był świetnie czytelny, a zdjęcie pozostało nasycone */} {/* Ciemny gradient pod spodem, by biały tekst był świetnie czytelny, a zdjęcie pozostało nasycone */}
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent lg:bg-gradient-to-r lg:from-black/90 lg:via-black/40 lg:to-transparent" /> <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent lg:bg-gradient-to-r lg:from-black/90 lg:via-black/40 lg:to-transparent" />