feat: Optimize component performance with GPU acceleration and add placeholder image for missing content

This commit is contained in:
kuekhaoyang
2025-11-18 15:15:45 +08:00
parent 44cae03731
commit 79ac2c349e
15 changed files with 106 additions and 26 deletions
+11 -4
View File
@@ -56,14 +56,21 @@ export function SearchLoadingAnimation({
style={{ borderRadius: 'var(--radius-full)' }}
>
<div
className="h-full bg-[var(--accent-color)] transition-all duration-500 ease-out relative"
className="h-full bg-[var(--accent-color)] transition-all duration-500 ease-out relative will-change-[width]"
style={{
width: `${progress}%`,
borderRadius: 'var(--radius-full)'
borderRadius: 'var(--radius-full)',
transform: 'translateZ(0)'
}}
>
{/* Shimmer Effect */}
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-shimmer"></div>
{/* Shimmer Effect - Optimized for GPU */}
<div
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-shimmer"
style={{
willChange: 'transform',
transform: 'translateZ(0)'
}}
></div>
</div>
</div>